Fixed single clear bug

CHANGELOG.md

@@ -18,7 +18,7 @@ All notable changes to this project will be documented in this file.
 - More elaborate type checking on attributes _parseImport_ method.
 - Unit test for all attribute imports (except Table).
 ### Fixed
-- Entity (Multiple-Choice) no longer uses all values when one is deleted.
+- Entity (Multiple-Choice) no longer removes all entries when a single one is deleted.
 - Frontend errors due to wrong dayjs import
 - Missing translation for _milligram_ in si-unit attribute
 - Entity search now allows to display more than first 10 results

resources/js/components/attribute/Entity.vue

@@ -10,9 +10,8 @@
         :infinite="true"
         :limit="10"
         :can-fetch-more="state.hasNextPage"
-        @selected="data => v.handleChange(data)"
+        @selected="selected"
         @entry-click="entity => entryClicked(entity)"
-        @deselect="v.handleChange(null)"
     />
     <router-link
         v-if="canShowLink"
@@ -157,6 +156,10 @@
                 }
             };
 
+            const selected = function (data) {
+                v.handleChange(data);
+            };
+
             // DATA
             const {
                 handleChange,
@@ -166,7 +169,7 @@
             } = useField(`entity_${props.name}`, yup.mixed().nullable(), {
                 initialValue: value.value || (props.multiple ? [] : null),
             });
-            
+
             const state = reactive({
                 query: computed(_ => route.query),
                 mode: computed(_ => props.multiple ? 'tags' : 'single'),
@@ -181,7 +184,6 @@
                 resetField,
                 value: computed(_ => {
                     if(!v.fieldValue) return (props.multiple ? [] : null);
-                    
                     let value = null;
                     if(v.fieldValue) {
                         if(props.multiple) {
@@ -193,7 +195,7 @@
                     return value;
                 }),
             });
-
+            
             watch(_ => value, (newValue, oldValue) => {
                 resetFieldState();
             });
@@ -219,6 +221,7 @@
                 resetFieldState,
                 undirtyField,
                 searchWrapper,
+                selected,
                 // STATE
                 state,
                 v,

resources/js/components/search/Simple.vue

@@ -263,6 +263,23 @@
                 }
                 state.loading = false;
             };
+            
+            const debouncedSearchRequest = _debounce(requestSearchEndpoint, props.delay);
+            const search = async query => {
+                if(!query) query = '';
+                resetSearch(query);
+                // As long as the query is typed we debounce the search
+                debouncedSearchRequest(query);
+            };
+            const resetSearch = (query = '') => {
+                state.query = query;
+                state.searchResults = [];
+                state.hasResults = false;
+            };
+            const loadMore = async _ => {
+                if(state.loading) return;
+                await requestSearchEndpoint(state.query);
+            };
 
             const displayResult = obj => {
                 if(keyText.value) {
@@ -276,6 +293,15 @@
             };
 
             const onChange = value => {
+                /**
+                 * For some reason the multiselect is triggered again after the value is cleared by clicking the
+                 * x button. In that case the value is set to null and emitted. And directly afterwards an emtpty
+                 * array is emitted as well. This is a workaround to 'parse' the empty object to null which prevents
+                 * the parent from assuming the value has changed again.
+                 */
+                if(value && typeof(value) === 'object' && Object.keys(value).length === 0) {
+                    value = null;
+                }                
                 context.emit('selected', value);
             };