Add ability to remove input text in Select and Relation fields

orchidsoftware · Jan 28, 2024 · 0e85da6 · 0e85da6
1 parent d83bab1
commit 0e85da6
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 3 deletions.
diff --git a/resources/js/controllers/relation_controller.js b/resources/js/controllers/relation_controller.js
@@ -30,14 +30,22 @@ export default class extends ApplicationController {
             valueField: 'value',
             labelField: 'label',
             searchField: [],
-            sortField: [{field:'$order'},{field:'$score'}],
+            sortField: [{field: '$order'}, {field: '$score'}],
             render: {
                 option_create: (data, escape) => `<div class="create">${this.data.get('message-add')} <strong>${escape(data.input)}</strong>&hellip;</div>`,
                 no_results: () => `<div class="no-results">${this.data.get('message-notfound')}</div>`,
             },
-            onDelete: () => !! this.data.get('allow-empty'),
+            onDelete: () => !!this.data.get('allow-empty'),
             load: (query, callback) => this.search(query, callback),
         });
+
+        if (select.hasAttribute('multiple') && this.data.get('clear-input')) {
+            this.choices.on('item_add', function () {
+                this.setTextboxValue('');
+                this.refreshOptions(false);
+            })
+        }
+
     }
 
     /**
@@ -70,7 +78,7 @@ export default class extends ApplicationController {
                 Object.entries(response.data).forEach((entry) => {
                     const [value, label] = entry;
 
-                    options.push({ label, value });
+                    options.push({label, value});
                 });
 
                 this.choices.clearOptions();

diff --git a/resources/js/controllers/select_controller.js b/resources/js/controllers/select_controller.js
@@ -32,6 +32,13 @@ export default class extends ApplicationController {
             },
             onDelete: () => !! this.data.get('allow-empty'),
         });
+
+        if (select.hasAttribute('multiple') && this.data.get('clear-input')) {
+            this.choices.on('item_add', function () {
+                this.setTextboxValue('');
+                this.refreshOptions(false);
+            })
+        }
     }
 
     /**

diff --git a/resources/views/fields/relation.blade.php b/resources/views/fields/relation.blade.php
@@ -10,6 +10,7 @@
          data-relation-append="{{ $relationAppend }}"
          data-relation-chunk="{{ $chunk }}"
          data-relation-allow-empty="{{ $allowEmpty }}"
+         data-relation-clear-input="{{ $clearInput }}"
          data-relation-route="{{ route('platform.systems.relation') }}"
          data-relation-message-notfound="{{ __('No results found') }}"
          data-relation-message-add="{{ __('Add') }}"

diff --git a/resources/views/fields/select.blade.php b/resources/views/fields/select.blade.php
@@ -3,6 +3,7 @@
         data-select-placeholder="{{$attributes['placeholder'] ?? ''}}"
         data-select-allow-empty="{{ $allowEmpty }}"
         data-select-message-notfound="{{ __('No results found') }}"
+        data-select-clear-input="{{ $clearInput }}"
         data-select-allow-add="{{ var_export($allowAdd, true) }}"
         data-select-message-add="{{ __('Add') }}"
     >

diff --git a/src/Screen/Concerns/Multipliable.php b/src/Screen/Concerns/Multipliable.php
@@ -24,4 +24,14 @@ public function multiple(): self
             $this->set('name', Str::finish($name, '[]'));
         });
     }
+
+    /**
+     * Remove entered text after add item
+     *
+     * @return $this
+     */
+    public function clearInput(bool $value = true): self
+    {
+        return $this->set('clearInput', $value);
+    }
 }
diff --git a/src/Screen/Fields/Relation.php b/src/Screen/Fields/Relation.php
@@ -51,6 +51,7 @@ class Relation extends Field
         'chunk'                 => 10,
         'allowEmpty'            => '',
         'allowAdd'              => false,
+        'clearInput'            => false,
     ];
 
     /**
@@ -245,6 +246,16 @@ public function allowEmpty(bool $value = true)
         return $this->set('allowEmpty', $value);
     }
 
+    /**
+     * Remove entered text after add item
+     *
+     * @return $this
+     */
+    public function clearInput(bool $value = true): self
+    {
+        return $this->set('clearInput', $value);
+    }
+
     /**
      * Allow empty value to be set
      *

diff --git a/src/Screen/Fields/Select.php b/src/Screen/Fields/Select.php
@@ -48,6 +48,8 @@ class Select extends Field implements ComplexFieldConcern
         'allowEmpty'   => '',
         'allowAdd'     => false,
         'isOptionList' => false,
+        'clearInput'   => false,
+
     ];
 
     /**