Merge pull request #1204 from Wizleap-Inc/feat/1203_search_selector

Bug: optionsに存在しないmodelValue/valuesを突っ込むと動かなくなる/UIがバグる箇所の修正

.changeset/breezy-deers-poke.md

@@ -0,0 +1,6 @@
+---
+"@wizleap-inc/wiz-ui-react": patch
+"@wizleap-inc/wiz-ui-next": patch
+---
+
+fix(search-selector): options に存在しない modelValue/values を突っ込むと動かなくなる/UI がバグる箇所の修正

packages/wiz-ui-next/src/components/base/inputs/search-selector/search-selector.vue

@@ -38,7 +38,9 @@
             </button>
           </span>
           <input
-            v-if="multiSelectable || !isValueMatched"
+            v-if="
+              multiSelectable || !isValueMatched || selectedItem.length === 0
+            "
             :class="selectBoxSearchInputStyle"
             :value="searchValue"
             @input="onSetSearchValue"
@@ -255,7 +257,11 @@ const valueToOption = computed(() =>
 );
 
 const selectedItem = computed(() => {
-  return props.modelValue.map((v) => valueToOption.value[v]);
+  // props.options.values の値の配列
+  const values = props.options.map((v) => v.value);
+  return props.modelValue
+    .filter((v) => values.includes(v))
+    .map((v) => valueToOption.value[v]);
 });
 
 const setUnselectableRef =

packages/wiz-ui-react/src/components/base/inputs/search-selector/components/search-selector.tsx

@@ -269,7 +269,9 @@ const SearchSelector: FC<Props> = ({
                 </button>
               </span>
             ))}
-            {(multiSelectable || values.length === 0) && (
+            {(multiSelectable ||
+              values.length === 0 ||
+              selectedOptions.length === 0) && (
               <input
                 ref={searchTextboxRef}
                 className={styles.selectBoxSearchInputStyle}