Merge pull request #110 from Semsee/feature/add-disabled-options

Allow individual options to be disabled

Author: maxmarcon

lib/live_select.ex

@@ -57,6 +57,9 @@ defmodule LiveSelect do
   * _maps_: `%{label: label, value: value}` or `%{value: value}`
   * _keywords_: `[label: label, value: value]` or `[value: value]`
 
+  Options can also be disabled when passing in tuples, maps or keywords. Disabled options are displayed, but can't be selected.
+  Maps and keywords need a `:disabled` key with a boolean value, and tuples should be a 3 element tuple of `{label, value, is_disabled}`
+
   In the case of maps and keywords, if only `value` is specified, it will be used as both value and label for the option.
 
   Because you can pass a list of tuples, you can use maps and keyword lists to pass the list of options, for example:
@@ -449,7 +452,7 @@ defmodule LiveSelect do
     doc:
       "Event to emit when the text input receives focus. The component id will be sent in the event's params"
 
-  @styling_options ~w(active_option_class available_option_class clear_button_class clear_button_extra_class clear_tag_button_class clear_tag_button_extra_class container_class container_extra_class dropdown_class dropdown_extra_class option_class option_extra_class text_input_class text_input_extra_class text_input_selected_class selected_option_class tag_class tag_extra_class tags_container_class tags_container_extra_class)a
+  @styling_options ~w(active_option_class available_option_class unavailable_option_class clear_button_class clear_button_extra_class clear_tag_button_class clear_tag_button_extra_class container_class container_extra_class dropdown_class dropdown_extra_class option_class option_extra_class text_input_class text_input_extra_class text_input_selected_class selected_option_class tag_class tag_extra_class tags_container_class tags_container_extra_class)a
 
   for attr_name <- @styling_options do
     Phoenix.Component.Declarative.__attr__!(

lib/live_select/component.ex

@@ -448,13 +448,21 @@ defmodule LiveSelect.Component do
     Enum.find_index(selection, fn %{label: label} -> label == option.label end)
   end
 
+  defp select(
+         socket,
+         %{disabled: true} = _selected,
+         _extra_params
+       ) do
+    socket
+  end
+
   defp select(
          %{assigns: %{selection: selection, max_selectable: max_selectable}} = socket,
          _selected,
          _extra_params
        )
        when max_selectable > 0 and length(selection) >= max_selectable do
-    assign(socket, hide_dropdown: not quick_tags_mode?(socket))
+    socket
   end
 
   defp select(socket, selected, extra_params) do
@@ -587,33 +595,51 @@ defmodule LiveSelect.Component do
     )
   end
 
-  defp normalize_option(option) do
-    case option do
-      nil ->
-        {:ok, nil}
-
-      "" ->
-        {:ok, nil}
+  defp normalize_option(option) when is_list(option) do
+    if Keyword.keyword?(option) do
+      Map.new(option)
+      |> normalize_option()
+    else
+      :error
+    end
+  end
 
+  defp normalize_option(option) when is_map(option) do
+    case option do
       %{key: key, value: _value} = option ->
-        {:ok, Map.put_new(option, :label, key)}
+        {:ok, Enum.into(option, %{label: key, disabled: false})}
 
       %{value: value} = option ->
-        {:ok, Map.put_new(option, :label, value)}
+        {:ok, Enum.into(option, %{label: value, disabled: false})}
 
-      option when is_list(option) ->
-        if Keyword.keyword?(option) do
-          Map.new(option)
-          |> normalize_option()
-        else
-          :error
-        end
+      _ ->
+        :error
+    end
+  end
 
+  defp normalize_option(option) when is_tuple(option) do
+    case option do
       {label, value} ->
-        {:ok, %{label: label, value: value}}
+        {:ok, %{label: label, value: value, disabled: false}}
+
+      {label, value, disabled} ->
+        {:ok, %{label: label, value: value, disabled: disabled}}
+
+      _ ->
+        :error
+    end
+  end
+
+  defp normalize_option(option) do
+    case option do
+      nil ->
+        {:ok, nil}
+
+      "" ->
+        {:ok, nil}
 
       option when is_binary(option) or is_atom(option) or is_number(option) ->
-        {:ok, %{label: option, value: option}}
+        {:ok, %{label: option, value: option, disabled: false}}
 
       _ ->
         :error
@@ -713,7 +739,8 @@ defmodule LiveSelect.Component do
     options
     |> Enum.with_index()
     |> Enum.reject(fn {opt, _} ->
-      active_option == opt || (mode != :quick_tags && already_selected?(opt, selection))
+      active_option == opt || (mode != :quick_tags && already_selected?(opt, selection)) ||
+        Map.get(opt, :disabled)
     end)
     |> Enum.map(fn {_, idx} -> idx end)
     |> Enum.find(active_option, &(&1 > active_option))
@@ -738,7 +765,8 @@ defmodule LiveSelect.Component do
     |> Enum.with_index()
     |> Enum.reverse()
     |> Enum.reject(fn {opt, _} ->
-      active_option == opt || (mode != :quick_tags && already_selected?(opt, selection))
+      active_option == opt || (mode != :quick_tags && already_selected?(opt, selection)) ||
+        Map.get(opt, :disabled)
     end)
     |> Enum.map(fn {_, idx} -> idx end)
     |> Enum.find(active_option, &(&1 < active_option || active_option == -1))

lib/live_select/component.html.heex

@@ -107,6 +107,9 @@
       <%= for {option, idx} <- Enum.with_index(@options) do %>
         <li class={
           cond do
+            option.disabled ->
+              class(@style, :unavailable_option, @unavailable_option_class)
+
             already_selected?(option, @selection) ->
               class(@style, :selected_option, @selected_option_class)
 

test/live_select_quick_tags_test.exs

@@ -572,4 +572,16 @@ defmodule LiveSelectQuickTagsTest do
       %{label: "C", value: value3}
     ])
   end
+
+  test "Disabled options can't be selected", %{live: live} do
+    stub_options([{"A", 1, true}, {"B", 2, false}, {"C", 3, false}])
+
+    type(live, "ABC")
+
+    select_nth_option(live, 1, method: :click)
+    refute_selected(live)
+
+    select_nth_option(live, 2, method: :click)
+    assert_selected_multiple(live, [%{value: 2, label: "B"}])
+  end
 end

test/live_select_tags_test.exs

@@ -221,6 +221,24 @@ defmodule LiveSelectTagsTest do
 
       assert_selected_multiple_static(live, ~w(B D))
     end
+
+    test "Disabled Items stay disabled", %{live: live} do
+      stub_options([{"A", 1, true}, {"B", 2, false}, {"C", 3, false}, {"D", 4, false}])
+
+      type(live, "ABC")
+      select_nth_option(live, 2, method: :click)
+
+      type(live, "ABC")
+      select_nth_option(live, 3, method: :click)
+      assert_selected_multiple(live, [%{value: 2, label: "B"}, %{value: 3, label: "C"}])
+
+      unselect_nth_option(live, 2)
+      assert_selected_multiple(live, [%{value: 2, label: "B"}])
+
+      type(live, "ABC")
+      select_nth_option(live, 1, method: :click)
+      assert_selected_multiple(live, [%{value: 2, label: "B"}])
+    end
   end
 
   test "can remove selected options by clicking on tag", %{live: live} do
@@ -548,4 +566,16 @@ defmodule LiveSelectTagsTest do
       %{label: "C", value: value3}
     ])
   end
+
+  test "Can't select disabled options as tags", %{live: live} do
+    stub_options([{"A", 1, true}, {"B", 2, false}, {"C", 3, false}])
+
+    type(live, "ABC")
+    select_nth_option(live, 1, method: :click)
+    refute_selected(live)
+
+    type(live, "ABC")
+    select_nth_option(live, 2, method: :click)
+    assert_selected_multiple(live, [%{label: "B", value: 2}])
+  end
 end

test/live_select_test.exs

@@ -65,7 +65,6 @@ defmodule LiveSelectTest do
     stub_options([{"A", 1}, {"B", 2}, {"C", 3}])
 
     {:ok, live, _html} = live(conn, "/")
-
     type(live, "ABC")
 
     assert_options(live, ["A", "B", "C"])
@@ -990,4 +989,88 @@ defmodule LiveSelectTest do
       end
     end
   end
+
+  describe "Disabled option tests" do
+    test "Disabled Options are skipped by keydown events", %{conn: conn} do
+      stub_options([{"A", 1, false}, {"B", 2, true}, {"C", 3, false}])
+
+      {:ok, live, _html} = live(conn, "/")
+
+      type(live, "ABC")
+      assert_options(live, ["A", "B", "C"])
+
+      select_nth_option(live, 2)
+      assert_selected(live, "C", 3)
+    end
+
+    test "Disabled Options are skipped by key up events", %{conn: conn} do
+      stub_options([{"A", 1, false}, {"B", 2, true}, {"C", 3, false}])
+
+      {:ok, live, _html} = live(conn, "/")
+
+      type(live, "ABC")
+      assert_options(live, ["A", "B", "C"])
+
+      # Navigate to C by going two down
+      navigate(live, 2, :down, [])
+
+      # Navigate back to A by going 1 up as we skip B because it's disabled.
+      # Then select the item we're on. It should be "A"
+      navigate(live, 1, :up, [])
+      keydown(live, "Enter", [])
+
+      assert_selected(live, "A", 1)
+    end
+
+    test "Supports disabling options filled from an enumerable of maps", %{conn: conn} do
+      stub_options([
+        %{label: "A", value: 1, disabled: false},
+        %{label: "B", value: 2, disabled: true},
+        %{label: "C", value: 3, disabled: false}
+      ])
+
+      {:ok, live, _html} = live(conn, "/")
+
+      type(live, "ABC")
+      assert_options(live, ["A", "B", "C"])
+
+      select_nth_option(live, 1)
+      assert_selected(live, "A", 1)
+
+      type(live, "ABC")
+      assert_options(live, ["A", "B", "C"])
+      # The maps are sorted on their key value pairings on the showcase page
+      # before being sent to the LiveSelect component. This results in the
+      # disabled option "B" being sorted last.
+      select_nth_option(live, 3, method: :click)
+      assert_selected_static(live, "A", 1)
+    end
+
+    test "Disabled options can't be selected with mouseclick", %{conn: conn} do
+      stub_options([{"A", 1, false}, {"B", 2, true}, {"C", 3, false}])
+
+      {:ok, live, _html} = live(conn, "/")
+      type(live, "ABC")
+
+      assert_options(live, ["A", "B", "C"])
+      select_nth_option(live, 1)
+      assert_selected(live, "A", 1)
+
+      # Mouse clicks won't change the selected option
+      type(live, "ABC")
+      select_nth_option(live, 2, method: :click)
+      assert_selected_static(live, "A", 1)
+    end
+
+    test "If everything is disabled, nothing is saved", %{conn: conn} do
+      stub_options([{"A", 1, true}, {"B", 2, true}])
+
+      {:ok, live, _html} = live(conn, "/")
+      type(live, "ABC")
+
+      assert_options(live, ["A", "B"])
+      select_nth_option(live, 1)
+      refute_selected(live)
+    end
+  end
 end

test/support/helpers.ex

@@ -289,9 +289,9 @@ defmodule LiveSelect.TestHelpers do
   def normalize_selection(selection) do
     for element <- selection do
       if is_binary(element) || is_integer(element) || is_atom(element) do
-        %{value: element, label: element}
+        %{value: element, label: element, disabled: false}
       else
-        element
+        element |> Map.put_new(:disabled, false)
       end
     end
   end