add X to clear input

OlliL · Dec 10, 2024 · cf80302 · cf80302
1 parent 4aec37a
commit cf80302
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/src/components/SelectStandard.vue b/src/components/SelectStandard.vue
@@ -8,6 +8,17 @@
         ref="hiddenRef"
         v-model="hiddenValue"
       />
+      <i
+        class="bi bi-x-lg position-absolute"
+        style="
+          right: 32px;
+          top: 18px;
+          cursor: pointer;
+          -webkit-text-stroke: 2px;
+        "
+        @click="clearInput"
+      >
+      </i>
       <input
         :class="'form-control dropdown-toggle ' + errorData.inputClass"
         style="scroll-margin-top: 56px"
@@ -21,6 +32,7 @@
         @focus="onFocus"
         @blur="onBlur"
       />
+
       <div
         class="dropdown-menu"
         style="max-height: 400px; overflow: scroll"
@@ -164,6 +176,11 @@ const getFirstDropdownAnchor = () => {
     : undefined;
 };
 
+const clearInput = () => {
+  if (fieldValue.value) setState({ touched: true });
+  hiddenValue.value = undefined;
+  fieldValue.value = undefined;
+};
 const setFieldValue = () => {
   fieldValue.value = props.selectBoxValues.find(
     (sbv) => sbv.id == hiddenValue.value,