fix(comp:select): input shouldn't trigger when allowInput is false (I…

…DuxFE#1168)
danranVm · Sep 28, 2022 · 43b0802 · 43b0802
1 parent 648f832
commit 43b0802
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 19 deletions.
diff --git a/packages/components/_private/selector/src/Selector.tsx b/packages/components/_private/selector/src/Selector.tsx
@@ -132,6 +132,7 @@ export default defineComponent({
       inputRef,
       inputValue,
       isComposing,
+      isFocused,
       handleCompositionStart,
       handleCompositionEnd,
       handleInput,

diff --git a/packages/components/_private/selector/src/contents/Input.tsx b/packages/components/_private/selector/src/contents/Input.tsx
@@ -18,17 +18,21 @@ export default defineComponent({
       mirrorRef,
       inputRef,
       inputValue,
+      isFocused,
       handleCompositionStart,
       handleCompositionEnd,
       handleInput,
     } = inject(selectorToken)!
 
+    const inputReadonly = computed(
+      () => props.readonly || !isFocused.value || !(props.allowInput || mergedSearchable.value),
+    )
     const innerStyle = computed(() => {
-      return { opacity: props.allowInput || mergedSearchable.value ? undefined : 0 }
+      return { opacity: inputReadonly.value ? 0 : undefined }
     })
 
     return () => {
-      const { autocomplete, autofocus, disabled, multiple, readonly } = props
+      const { autocomplete, autofocus, disabled, multiple } = props
       const prefixCls = `${mergedPrefixCls.value}-input`
       return (
         <div class={prefixCls}>
@@ -39,7 +43,7 @@ export default defineComponent({
             autocomplete={autocomplete}
             autofocus={autofocus}
             disabled={disabled}
-            readonly={readonly}
+            readonly={inputReadonly.value}
             value={inputValue.value}
             onCompositionstart={handleCompositionStart}
             onCompositionend={handleCompositionEnd}

diff --git a/packages/components/_private/selector/src/token.ts b/packages/components/_private/selector/src/token.ts
@@ -18,6 +18,7 @@ export interface SelectorContext {
   inputRef: Ref<HTMLInputElement | undefined>
   inputValue: Ref<string>
   isComposing: Ref<boolean>
+  isFocused: Ref<boolean>
   handleCompositionStart: (evt: CompositionEvent) => void
   handleCompositionEnd: (evt: CompositionEvent) => void
   handleInput: (evt: Event) => void

diff --git a/packages/components/cascader/__tests__/__snapshots__/cascader.spec.ts.snap b/packages/components/cascader/__tests__/__snapshots__/cascader.spec.ts.snap
@@ -13,7 +13,7 @@ exports[`Cascader > multiple work > render work 1`] = `
       </div>
       <!---->
       <div class=\\"ix-overflow-item ix-overflow-suffix\\">
-        <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0; width: 0px;\\" autocomplete=\\"off\\"><span class=\\"ix-selector-input-mirror\\" aria-hidden=\\"true\\"></span></div>
+        <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0; width: 0px;\\" autocomplete=\\"off\\" readonly=\\"\\"><span class=\\"ix-selector-input-mirror\\" aria-hidden=\\"true\\"></span></div>
       </div>
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(180deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
@@ -30,7 +30,7 @@ exports[`Cascader > single work > render work 1`] = `
     <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">Components/General/Button</span>
       <!---->
     </div>
-    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(180deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>

diff --git a/packages/components/pagination/__tests__/__snapshots__/pagination.spec.ts.snap b/packages/components/pagination/__tests__/__snapshots__/pagination.spec.ts.snap
@@ -41,7 +41,7 @@ exports[`Pagination > render work 3`] = `
           <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">10</span>
             <!---->
           </div>
-          <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+          <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
             <!---->
           </div>
           <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>

diff --git a/packages/components/select/__tests__/__snapshots__/select.spec.ts.snap b/packages/components/select/__tests__/__snapshots__/select.spec.ts.snap
@@ -28,7 +28,7 @@ exports[`Select > multiple work > maxLabel responsive work 1`] = `
         </div>
       </div>
       <div class=\\"ix-overflow-item ix-overflow-suffix\\">
-        <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0; width: 0px;\\" autocomplete=\\"off\\"><span class=\\"ix-selector-input-mirror\\" aria-hidden=\\"true\\"></span></div>
+        <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0; width: 0px;\\" autocomplete=\\"off\\" readonly=\\"\\"><span class=\\"ix-selector-input-mirror\\" aria-hidden=\\"true\\"></span></div>
       </div>
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
@@ -55,7 +55,7 @@ exports[`Select > multiple work > maxLabel responsive work 2`] = `
         </div>
       </div>
       <div class=\\"ix-overflow-item ix-overflow-suffix\\">
-        <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0; width: 0px;\\" autocomplete=\\"off\\"><span class=\\"ix-selector-input-mirror\\" aria-hidden=\\"true\\"></span></div>
+        <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0; width: 0px;\\" autocomplete=\\"off\\" readonly=\\"\\"><span class=\\"ix-selector-input-mirror\\" aria-hidden=\\"true\\"></span></div>
       </div>
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
@@ -79,7 +79,7 @@ exports[`Select > multiple work > render work 1`] = `
       </div>
       <!---->
       <div class=\\"ix-overflow-item ix-overflow-suffix\\">
-        <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0; width: 0px;\\" autocomplete=\\"off\\"><span class=\\"ix-selector-input-mirror\\" aria-hidden=\\"true\\"></span></div>
+        <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0; width: 0px;\\" autocomplete=\\"off\\" readonly=\\"\\"><span class=\\"ix-selector-input-mirror\\" aria-hidden=\\"true\\"></span></div>
       </div>
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
@@ -94,7 +94,7 @@ exports[`Select > single work > render work 1`] = `
     <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">Tom</span>
       <!---->
     </div>
-    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
@@ -109,7 +109,7 @@ exports[`Select > template work > render work 1`] = `
     <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">Tom</span>
       <!---->
     </div>
-    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>

diff --git a/packages/components/tree-select/__tests__/__snapshots__/treeSelect.spec.ts.snap b/packages/components/tree-select/__tests__/__snapshots__/treeSelect.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`TreeSelect > multiple work > render work 1`] = `
     <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">Node 0</span>
       <!---->
     </div>
-    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(180deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
@@ -24,7 +24,7 @@ exports[`TreeSelect > single work > custom keys work 1`] = `
     <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">Node 0</span>
       <!---->
     </div>
-    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(180deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
@@ -41,7 +41,7 @@ exports[`TreeSelect > single work > render work 1`] = `
     <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">Node 0</span>
       <!---->
     </div>
-    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(180deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
@@ -58,7 +58,7 @@ exports[`TreeSelect > single work > searchFn work 1`] = `
     <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">Node 0</span>
       <!---->
     </div>
-    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
@@ -73,7 +73,7 @@ exports[`TreeSelect > single work > searchFn work 2`] = `
     <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">Node 0</span>
       <!---->
     </div>
-    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"down\\">
@@ -90,7 +90,7 @@ exports[`TreeSelect > single work > searchFn work 3`] = `
     <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">Node 0</span>
       <!---->
     </div>
-    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"down\\">
@@ -107,7 +107,7 @@ exports[`TreeSelect > single work > searchable work 1`] = `
     <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">Node 0</span>
       <!---->
     </div>
-    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" autocomplete=\\"off\\">
+    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
@@ -121,7 +121,7 @@ exports[`TreeSelect > single work > searchable work 2`] = `
 "<div class=\\"ix-tree-select ix-selector ix-selector-opened ix-selector-single ix-selector-md\\">
   <!---->
   <div class=\\"ix-selector-content\\">
-    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" autocomplete=\\"off\\" style=\\"opacity: 0;\\">
+    <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(180deg);\\" role=\\"img\\" aria-label=\\"down\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"down\\">