fix(ui:selectbox): fix dSearchable not work

Author: xiejay97

package.json

@@ -44,7 +44,6 @@
     "rfs": "^9.0.6",
     "rxjs": "^7.5.5",
     "scrollview-resize": "^1.0.2",
-    "stylelint-config-recess-order": "^3.0.0",
     "tslib": "^2.4.0"
   },
   "devDependencies": {
@@ -95,6 +94,7 @@
     "standard-version": "^9.5.0",
     "stylelint": "^14.9.0",
     "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-recess-order": "^3.0.0",
     "stylelint-config-recommended-scss": "^6.0.0",
     "stylelint-config-standard": "^26.0.0",
     "stylelint-scss": "^4.2.0",

packages/ui/src/components/_selectbox/Selectbox.tsx

@@ -16,7 +16,7 @@ import { DTransition } from '../_transition';
 
 export type DExtendsSelectboxProps = Pick<
   DSelectboxProps,
-  'dFormControl' | 'dPlaceholder' | 'dDisabled' | 'dSearchable' | 'dSize' | 'dLoading' | 'onClear' | 'onVisibleChange'
+  'dFormControl' | 'dPlaceholder' | 'dDisabled' | 'dSearchable' | 'dSize' | 'dLoading' | 'onClear' | 'onSearch' | 'onVisibleChange'
 >;
 
 export interface DSelectboxRenderProps {
@@ -44,6 +44,7 @@ export interface DSelectboxProps extends Omit<React.HTMLAttributes<HTMLDivElemen
   dInputProps: React.InputHTMLAttributes<HTMLInputElement> & { 'aria-controls': string };
   onVisibleChange?: (visible: boolean) => void;
   onFocusVisibleChange?: (visible: boolean) => void;
+  onSearch?: (value: string) => void;
   onClear?: () => void;
 }
 
@@ -67,6 +68,7 @@ export function DSelectbox(props: DSelectboxProps): JSX.Element | null {
     dInputProps,
     onVisibleChange,
     onFocusVisibleChange,
+    onSearch,
     onClear,
 
     className,
@@ -242,7 +244,10 @@ export function DSelectbox(props: DSelectboxProps): JSX.Element | null {
                 onChange={(e) => {
                   dInputProps?.onChange?.(e);
 
-                  setSearchValue(e.currentTarget.value);
+                  if (dSearchable && dVisible) {
+                    setSearchValue(e.currentTarget.value);
+                    onSearch?.(e.currentTarget.value);
+                  }
                 }}
                 onKeyDown={(e) => {
                   dInputProps?.onKeyDown?.(e);

packages/ui/src/components/cascader/Cascader.tsx

@@ -46,7 +46,6 @@ export interface DCascaderBaseProps<V extends DId, T extends DCascaderOption<V>>
   dAutoMaxWidth?: boolean;
   dPopupClassName?: string;
   onFocusChange?: (value: V, option: DNestedChildren<T>) => void;
-  onSearch?: (value: string) => void;
 }
 
 export interface DCascaderSingleProps<V extends DId, T extends DCascaderOption<V>> extends DCascaderBaseProps<V, T> {
@@ -86,14 +85,14 @@ export function DCascader<V extends DId, T extends DCascaderOption<V>>(props: DC
     dPopupClassName,
     onFocusChange,
     onModelChange,
-    onSearch,
 
     dFormControl,
     dLoading,
     dDisabled,
     dSize,
     onVisibleChange,
     onClear,
+    onSearch,
 
     className,
     ...restProps
@@ -371,12 +370,6 @@ export function DCascader<V extends DId, T extends DCascaderOption<V>>(props: DC
       dSize={size}
       dInputProps={{
         'aria-controls': listId,
-        onChange: (e) => {
-          const value = e.currentTarget.value;
-          setSearchValue(value);
-
-          onSearch?.(value);
-        },
         onKeyDown: (e) => {
           if (visible) {
             onKeyDown$.next(e);
@@ -386,6 +379,11 @@ export function DCascader<V extends DId, T extends DCascaderOption<V>>(props: DC
       dCustomWidth
       dAutoMaxWidth={dAutoMaxWidth}
       onClear={handleClear}
+      onSearch={(value) => {
+        onSearch?.(value);
+
+        setSearchValue(value);
+      }}
       onVisibleChange={changeVisible}
       onFocusVisibleChange={setIsFocusVisible}
     >

packages/ui/src/components/select/Select.tsx

@@ -40,7 +40,6 @@ export interface DSelectBaseProps<V extends DId, T extends DSelectOption<V>>
   dPopupClassName?: string;
   onScrollBottom?: () => void;
   onCreateOption?: (option: DNestedChildren<T>) => void;
-  onSearch?: (value: string) => void;
 }
 
 export interface DSelectSingleProps<V extends DId, T extends DSelectOption<V>> extends DSelectBaseProps<V, T> {
@@ -85,7 +84,6 @@ export function DSelect<V extends DId, T extends DSelectOption<V>>(props: DSelec
     onModelChange,
     onScrollBottom,
     onCreateOption,
-    onSearch,
     onExceed,
 
     dFormControl,
@@ -94,6 +92,7 @@ export function DSelect<V extends DId, T extends DSelectOption<V>>(props: DSelec
     dSize,
     onVisibleChange,
     onClear,
+    onSearch,
 
     className,
     ...restProps
@@ -401,12 +400,6 @@ export function DSelect<V extends DId, T extends DSelectOption<V>>(props: DSelec
       dSize={size}
       dInputProps={{
         'aria-controls': listId,
-        onChange: (e) => {
-          const value = e.currentTarget.value;
-          setSearchValue(value);
-
-          onSearch?.(value);
-        },
         onKeyDown: (e) => {
           if (visible && !isUndefined(focusOption)) {
             switch (e.code) {
@@ -461,6 +454,11 @@ export function DSelect<V extends DId, T extends DSelectOption<V>>(props: DSelec
           changeSelect(null);
         }
       }}
+      onSearch={(value) => {
+        onSearch?.(value);
+
+        setSearchValue(value);
+      }}
       onVisibleChange={changeVisible}
       onFocusVisibleChange={setIsFocusVisible}
     >

yarn.lock

@@ -9214,7 +9214,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.2.13, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.0, postcss@^8.4.7:
+postcss@^8.2.13, postcss@^8.3.5, postcss@^8.4.0, postcss@^8.4.7:
   version "8.4.8"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.8.tgz#dad963a76e82c081a0657d3a2f3602ce10c2e032"
   integrity sha512-2tXEqGxrjvAO6U+CJzDL2Fk2kPHTv1jQsYkSoMeOis2SsYaXRO2COxTdQp99cYvif9JTXaAk9lYGc3VhJt7JPQ==
@@ -9223,7 +9223,7 @@ postcss@^8.2.13, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.0, postcss@^8.4.7
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.14:
+postcss@^8.3.11, postcss@^8.4.14:
   version "8.4.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
   integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==