fix(ui): render div when dSearchable is false

DevCloudFE · Feb 22, 2023 · 84f4189 · 84f4189
1 parent baedaaf
commit 84f4189
Showing 1 changed file with 30 additions and 20 deletions.
diff --git a/packages/ui/src/components/_selectbox/Selectbox.tsx b/packages/ui/src/components/_selectbox/Selectbox.tsx
@@ -176,26 +176,36 @@ export function DSelectbox(props: DSelectboxProps): JSX.Element | null {
                         return dInputRender(
                           renderFocusVisible(
                             renderBaseInput(
-                              <input
-                                ref={combineInputRef}
-                                className={`${prefix}__search`}
-                                style={{
-                                  opacity: inputable ? undefined : 0,
-                                  zIndex: inputable ? undefined : -1,
-                                }}
-                                type="text"
-                                autoComplete="off"
-                                disabled={dDisabled}
-                                role="combobox"
-                                aria-haspopup="listbox"
-                                aria-expanded={dVisible}
-                                onFocus={() => {
-                                  setIsFocus(true);
-                                }}
-                                onBlur={() => {
-                                  setIsFocus(false);
-                                }}
-                              />
+                              React.createElement<any>(
+                                dSearchable ? 'input' : 'div',
+                                Object.assign(
+                                  {
+                                    ref: combineInputRef,
+                                    className: `${prefix}__search`,
+                                    style: {
+                                      opacity: inputable ? undefined : 0,
+                                      zIndex: inputable ? undefined : -1,
+                                    },
+                                    tabIndex: dDisabled ? -1 : 0,
+                                    role: 'combobox',
+                                    'aria-haspopup': 'listbox',
+                                    'aria-expanded': dVisible,
+                                    onFocus: () => {
+                                      setIsFocus(true);
+                                    },
+                                    onBlur: () => {
+                                      setIsFocus(false);
+                                    },
+                                  },
+                                  dSearchable
+                                    ? {
+                                        type: 'text',
+                                        autoComplete: 'off',
+                                        disabled: dDisabled,
+                                      }
+                                    : {}
+                                )
+                              )
                             )
                           )
                         );