src/Form/Control/Dropdown.php

@@ -5,13 +5,13 @@
 namespace Atk4\Ui\Form\Control;
 
 use Atk4\Ui\HtmlTemplate;
+use Atk4\Ui\Js\Jquery;
 use Atk4\Ui\Js\JsExpression;
 use Atk4\Ui\Js\JsExpressionable;
 use Atk4\Ui\Js\JsFunction;
 
 class Dropdown extends Input
 {
-    public $ui = 'dropdown fluid search selection';
     public $defaultTemplate = 'form/control/dropdown.html';
 
     public string $inputType = 'hidden';
@@ -33,16 +33,6 @@ class Dropdown extends Input
     /** @var string The string to set as an empty values. */
     public $empty = "\u{00a0}"; // Unicode NBSP
 
-    /**
-     * The icon to display at the dropdown menu.
-     *  The template default is set to: 'dropdown'.
-     *  Note: dropdown icon is show on the right side of the menu
-     *  while other icon are usually display on the left side.
-     *
-     * @var string|null
-     */
-    public $dropIcon;
-
     /** @var array Dropdown options as per Fomantic-UI dropdown options. */
     public $dropdownOptions = [];
 
@@ -175,12 +165,23 @@ public function setDropdownOptions($options): void
         $this->dropdownOptions = array_merge($this->dropdownOptions, $options);
     }
 
+    /**
+     * @param bool|string      $when
+     * @param JsExpressionable $action
+     *
+     * @return Jquery
+     */
+    protected function jsDropdown($when = false, $action = null): JsExpressionable
+    {
+        return $this->js($when, $action, 'div.ui.dropdown:has(> #' . $this->name . '_input)');
+    }
+
     /**
      * Render JS for dropdown.
      */
     protected function jsRenderDropdown(): JsExpressionable
     {
-        return $this->js(true)->dropdown($this->dropdownOptions);
+        return $this->jsDropdown(true)->dropdown($this->dropdownOptions);
     }
 
     /**
@@ -220,32 +221,27 @@ protected function htmlRenderValue(): void
     protected function renderView(): void
     {
         if ($this->isMultiple) {
-            $this->addClass('multiple');
+            $this->template->dangerouslySetHtml('multipleClass', 'multiple');
         }
 
         if ($this->readOnly || $this->disabled) {
             $this->setDropdownOption('allowTab', false);
-            $this->removeClass('search');
             if ($this->isMultiple) {
-                $this->js(true)->find('a i.delete.icon')->attr('class', 'disabled');
+                $this->jsDropdown(true)->find('a i.delete.icon')->attr('class', 'disabled');
             }
         }
 
         if ($this->disabled) {
-            $this->addClass('disabled');
+            $this->template->set('disabledClass', ' disabled');
             $this->template->dangerouslySetHtml('disabled', 'disabled="disabled"');
         } elseif ($this->readOnly) {
-            $this->addClass('read-only');
+            $this->template->set('disabledClass', ' read-only');
             $this->template->dangerouslySetHtml('disabled', 'readonly="readonly"');
 
             $this->setDropdownOption('allowTab', false);
             $this->setDropdownOption('onShow', new JsFunction([], [new JsExpression('return false')]));
         }
 
-        if ($this->dropIcon) {
-            $this->template->set('DropIcon', $this->dropIcon);
-        }
-
         $this->template->set('DefaultText', $this->empty);
 
         $this->htmlRenderValue();

src/Form/Control/Lookup.php

@@ -13,6 +13,7 @@
 use Atk4\Ui\Js\Jquery;
 use Atk4\Ui\Js\JsBlock;
 use Atk4\Ui\Js\JsExpression;
+use Atk4\Ui\Js\JsExpressionable;
 use Atk4\Ui\Js\JsFunction;
 use Atk4\Ui\Js\JsModal;
 use Atk4\Ui\Js\JsToast;
@@ -130,7 +131,6 @@ protected function init(): void
         parent::init();
 
         $this->template->set([
-            'inputId' => $this->name . '-ac',
             'placeholder' => $this->placeholder,
         ]);
 
@@ -142,6 +142,17 @@ protected function init(): void
         });
     }
 
+    /**
+     * @param bool|string      $when
+     * @param JsExpressionable $action
+     *
+     * @return Jquery
+     */
+    protected function jsDropdown($when = false, $action = null): JsExpressionable
+    {
+        return $this->js($when, $action, 'div.ui.dropdown:has(> #' . $this->name . '_input)');
+    }
+
     /**
      * Returns URL which would respond with first 50 matching records.
      */
@@ -261,7 +272,7 @@ protected function initQuickNewRecord(): void
                 $res->addStatement((new Jquery())->closest('.atk-modal')->modal('hide'));
 
                 $row = $this->renderRow($form->model);
-                $chain = new Jquery('#' . $this->name . '-ac');
+                $chain = $this->jsDropdown();
                 $chain->dropdown('set value', $row['value'])->dropdown('set text', $row['title']);
                 $res->addStatement($chain);
 
@@ -371,7 +382,7 @@ protected function renderView(): void
             ], $this->apiConfig['data'] ?? []);
         }
 
-        $chain = new Jquery('#' . $this->name . '-ac');
+        $chain = $this->jsDropdown();
 
         $this->initDropdown($chain);
 

template/form/control/dropdown.html

@@ -1,13 +1,15 @@
 
 <div {$attributes}>
 {$BeforeInput}{$AfterBeforeInput}
+<div class="ui dropdown {$multipleClass} search selection{$disabledClass}" style="width: 100%;">
 {$Input}
-<i class="{DropIcon}dropdown{/} icon"></i>
+<i class="dropdown icon"></i>
 <div class="default text">{$DefaultText}</div>
 <input class="search" {$disabled} style="width: 100%;">
 <div class="menu">
 {Item}<div class="item" data-value="{$value}">{Icon}<i class="{$iconClass}"></i>{/Icon}{$title}</div>
 {/Item}
 </div>
+</div>
 {$AfterInput}{$AfterAfterInput}
 </div>

template/form/control/dropdown.pug

@@ -1,13 +1,15 @@
 | <div {$attributes}>
 | {$BeforeInput}{$AfterBeforeInput}
+| <div class="ui dropdown {$multipleClass} search selection{$disabledClass}" style="width: 100%;">
 | {$Input}
-| <i class="{DropIcon}dropdown{/} icon"></i>
+| <i class="dropdown icon"></i>
 | <div class="default text">{$DefaultText}</div>
 | <input class="search" {$disabled} style="width: 100%;">
 | <div class="menu">
 | {Item}<div class="item" data-value="{$value}">{Icon}<i class="{$iconClass}"></i>{/Icon}{$title}</div>
 | {/Item}
 | </div>
+| </div>
 | {$AfterInput}{$AfterAfterInput}
 | </div>
 = "\n"

template/form/control/lookup.html

@@ -1,7 +1,7 @@
 
 <div {$attributes}>
 {$BeforeInput}{$AfterBeforeInput}
-<div id="{$inputId}" class="ui {$multipleClass} search selection dropdown{$disabledClass}" style="width: 100%;">
+<div class="ui dropdown {$multipleClass} search selection{$disabledClass}" style="width: 100%;">
 {$Input}
 <i class="dropdown icon"></i>
 <div class="default text">{$placeholder}</div>

template/form/control/lookup.pug

@@ -1,6 +1,6 @@
 | <div {$attributes}>
 | {$BeforeInput}{$AfterBeforeInput}
-| <div id="{$inputId}" class="ui {$multipleClass} search selection dropdown{$disabledClass}" style="width: 100%;">
+| <div class="ui dropdown {$multipleClass} search selection{$disabledClass}" style="width: 100%;">
 | {$Input}
 | <i class="dropdown icon"></i>
 | <div class="default text">{$placeholder}</div>