diff --git a/src/Form/Control/Dropdown.php b/src/Form/Control/Dropdown.php index 4ec3b987a6..d28f13e6bf 100644 --- a/src/Form/Control/Dropdown.php +++ b/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'; @@ -165,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); } /** @@ -210,22 +221,21 @@ protected function htmlRenderValue(): void protected function renderView(): void { if ($this->multiple) { - $this->addClass('multiple'); + $this->template->dangerouslySetHtml('multipleClass', 'multiple'); } if ($this->readOnly || $this->disabled) { $this->setDropdownOption('allowTab', false); - $this->removeClass('search'); if ($this->multiple) { - $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); diff --git a/src/Form/Control/Lookup.php b/src/Form/Control/Lookup.php index dee85d487e..646716be1c 100644 --- a/src/Form/Control/Lookup.php +++ b/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); diff --git a/template/form/control/dropdown.html b/template/form/control/dropdown.html index eac6a69a0a..ad78d8e834 100644 --- a/template/form/control/dropdown.html +++ b/template/form/control/dropdown.html @@ -1,6 +1,7 @@