@laser-ui/components 0.6.5 → 0.6.7

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.7](https://github.com/laser-ui/laser-ui/compare/v0.6.6...v0.6.7) (2024-07-10)
+
+### Bug Fixes
+
+- **components:** fix get window size ([5f20aa9](https://github.com/laser-ui/laser-ui/commit/5f20aa9b5c8fb4e0dd40c9516847461e18ab5b65))
+
+### Features
+
+- **components:** table-filter support custom footer ([31faf0a](https://github.com/laser-ui/laser-ui/commit/31faf0a9488744d83c3e9f9276bfac225ea4514b))
+
+## [0.6.6](https://github.com/laser-ui/laser-ui/compare/v0.6.5...v0.6.6) (2024-06-14)
+
+### Features
+
+- **components:** emit change after IME composition ends ([1f80404](https://github.com/laser-ui/laser-ui/commit/1f80404d037c74bd125ca0415c79f0542b6b4ce1))
+
 ## [0.6.5](https://github.com/laser-ui/laser-ui/compare/v0.6.4...v0.6.5) (2024-06-11)
 
 ### Bug Fixes

package/base-input/BaseInput.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { BaseInputProps } from './types';
+export declare const BaseInput: import("react").ForwardRefExoticComponent<BaseInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/base-input/BaseInput.js

@@ -0,0 +1,27 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isString } from 'lodash';
+import { forwardRef, useState } from 'react';
+export const BaseInput = forwardRef((props, ref) => {
+    const { value, onValueChange } = props, restProps = __rest(props, ["value", "onValueChange"]);
+    const [composing, setComposing] = useState();
+    return (_jsx("input", Object.assign({}, restProps, { ref: ref, value: isString(composing) ? composing : value, onCompositionStart: (e) => {
+            var _a;
+            (_a = restProps.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            setComposing(e.currentTarget.value);
+        }, onCompositionEnd: (e) => {
+            var _a;
+            (_a = restProps.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            setComposing(undefined);
+            onValueChange(e.currentTarget.value);
+        }, onChange: (e) => {
+            var _a;
+            (_a = restProps.onChange) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            if (isString(composing)) {
+                setComposing(e.currentTarget.value);
+            }
+            else {
+                onValueChange(e.currentTarget.value);
+            }
+        } })));
+});

package/base-input/index.d.ts

@@ -0,0 +1,2 @@
+export type { BaseInputProps } from './types';
+export { BaseInput } from './BaseInput';

package/base-input/index.js

@@ -0,0 +1 @@
+export { BaseInput } from './BaseInput';

package/base-input/types.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export {};
+export interface BaseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    onValueChange: (val: string) => void;
+}

package/base-input/types.js

@@ -0,0 +1 @@
+export {};

package/cascader/Cascader.js

@@ -11,6 +11,7 @@ import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef,
 import { CascaderPanel } from './internal/CascaderPanel';
 import { CascaderSearchPanel } from './internal/CascaderSearchPanel';
 import { CLASSES } from './vars';
+import { BaseInput } from '../base-input';
 import { Dropdown } from '../dropdown';
 import { useComponentProps, useControlled, useDesign, useFocusVisible, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
@@ -217,7 +218,7 @@ function CascaderFC(props, ref) {
     const scrollCallback = useRef();
     const inputable = searchable && visible;
     const clearable = clearableProp && hasSelected && !visible && !loading && !disabled;
-    const inputNode = focusVisibleWrapper(createElement(searchable ? 'input' : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('cascader__search'), {
+    const inputNode = focusVisibleWrapper(createElement(searchable ? BaseInput : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('cascader__search'), {
         style: {
             opacity: inputable ? undefined : 0,
             zIndex: inputable ? undefined : -1,
@@ -338,16 +339,15 @@ function CascaderFC(props, ref) {
                     }
                 }
             }
-        }, onChange: (e) => {
-            if (searchable) {
-                changeSearchValue(e.currentTarget.value);
-            }
         } }), searchable
         ? {
             type: 'text',
             value: searchValue,
             autoComplete: 'off',
             disabled,
+            onValueChange: (val) => {
+                changeSearchValue(val);
+            },
         }
         : {})));
     const [selectedNode, suffixNode, selectedLabel] = (() => {

package/date-picker/DatePicker.js

@@ -9,6 +9,7 @@ import { isArray, isBoolean, isNull, isUndefined } from 'lodash';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { DatePickerPanel } from './internal/DatePickerPanel';
 import { CLASSES } from './vars';
+import { BaseInput } from '../base-input';
 import { Button } from '../button';
 import dayjs from '../dayjs';
 import { useComponentProps, useControlled, useDesign, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
@@ -203,11 +204,11 @@ export const DatePicker = forwardRef((props, ref) => {
         const index = isLeft ? 0 : 1;
         const value = isLeft ? valueLeft : valueRight;
         const render = inputRender === null || inputRender === void 0 ? void 0 : inputRender[index];
-        const node = (_jsx("input", Object.assign({}, styled('date-picker__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? combineInputLeftRef : combineInputRightRef, type: "text", autoComplete: "off", value: inputValue[index], size: 22, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onChange: (e) => {
+        const node = (_jsx(BaseInput, Object.assign({}, styled('date-picker__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? combineInputLeftRef : combineInputRightRef, type: "text", autoComplete: "off", value: inputValue[index], size: 22, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onValueChange: (val) => {
                 forceUpdate();
-                dataRef.current.inputValue[index] = e.currentTarget.value;
-                if (dayjs(e.currentTarget.value, format, true).isValid()) {
-                    const date = dayjs(e.currentTarget.value, format).toDate();
+                dataRef.current.inputValue[index] = val;
+                if (dayjs(val, format, true).isValid()) {
+                    const date = dayjs(val, format).toDate();
                     changeValue(date);
                     updatePanel(date);
                 }

package/input/Input.js

@@ -8,6 +8,7 @@ import VisibilityOffOutlined from '@material-design-icons/svg/outlined/visibilit
 import { useRef } from 'react';
 import { InputNumber } from './InputNumber';
 import { CLASSES } from './vars';
+import { BaseInput } from '../base-input';
 import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
 import { mergeCS } from '../utils';
@@ -26,8 +27,8 @@ export const Input = (props) => {
         }
     };
     const designProps = useDesign({ compose: { disabled }, form: formControl });
-    const inputNode = (_jsx("input", Object.assign({}, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: combineInputRef, value: value, type: type === 'password' ? (password ? 'password' : 'text') : type, placeholder: placeholder, disabled: disabled, onChange: (e) => {
-            changeValue(e.currentTarget.value);
+    const inputNode = (_jsx(BaseInput, Object.assign({}, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: combineInputRef, value: value, type: type === 'password' ? (password ? 'password' : 'text') : type, placeholder: placeholder, disabled: disabled, onValueChange: (val) => {
+            changeValue(val);
         } })));
     return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('input', `input--${size}`, {
         'input.is-disabled': disabled,

package/input/InputNumber.js

@@ -8,6 +8,7 @@ import KeyboardArrowUpOutlined from '@material-design-icons/svg/outlined/keyboar
 import { isNull, isUndefined } from 'lodash';
 import { useRef } from 'react';
 import { CLASSES } from './vars';
+import { BaseInput } from '../base-input';
 import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
 import { mergeCS } from '../utils';
@@ -68,16 +69,16 @@ export function InputNumber(props) {
         }
     };
     const designProps = useDesign({ compose: { disabled }, form: formControl });
-    const inputNode = (_jsx("input", Object.assign({}, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: combineInputRef, value: inputValue, max: max, min: min, step: step, type: "number", placeholder: placeholder, disabled: disabled, onChange: (e) => {
+    const inputNode = (_jsx(BaseInput, Object.assign({}, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: combineInputRef, value: inputValue, max: max, min: min, step: step, type: "number", placeholder: placeholder, disabled: disabled, onValueChange: (val) => {
             forceUpdate();
-            dataRef.current.inputValue = e.currentTarget.value;
-            if (e.currentTarget.value.length === 0) {
+            dataRef.current.inputValue = val;
+            if (val.length === 0) {
                 changeValue(null);
             }
             else {
-                const val = Number(e.currentTarget.value);
-                if ((isUndefined(max) || val <= max) && (isUndefined(min) || val >= min) && (!integer || Number.isInteger(val))) {
-                    changeValue(val);
+                const num = Number(val);
+                if ((isUndefined(max) || num <= max) && (isUndefined(min) || num >= min) && (!integer || Number.isInteger(num))) {
+                    changeValue(num);
                 }
             }
         }, onFocus: () => {
@@ -89,17 +90,17 @@ export function InputNumber(props) {
                 changeValue(null);
             }
             else {
-                let val = Number(inputValue);
-                if (!isUndefined(max) && val > max) {
-                    val = max;
+                let num = Number(inputValue);
+                if (!isUndefined(max) && num > max) {
+                    num = max;
                 }
-                if (!isUndefined(min) && val < min) {
-                    val = min;
+                if (!isUndefined(min) && num < min) {
+                    num = min;
                 }
-                if (integer && !Number.isInteger(val)) {
-                    val = Math.round(val);
+                if (integer && !Number.isInteger(num)) {
+                    num = Math.round(num);
                 }
-                changeValue(val);
+                changeValue(num);
             }
         } })));
     return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('input', `input--${size}`, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -40,5 +40,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "4a94e6ec5bcfa6f04633956dd74c71203bb2e00f"
+  "gitHead": "a9765f429b263e6f0183e2b37ba21697846ac014"
 }

package/root/Root.js

@@ -1,39 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { useEvent, useRefExtra } from '@laser-ui/hooks';
 import { isString, set } from 'lodash';
 import { useStore } from 'rcl-store';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo } from 'react';
 import { ROOT_DATA, RootContext, Store } from './vars';
 import dayjs from '../dayjs';
-import { Portal } from '../internal/portal';
 import resources from '../resources.json';
-function WindowSize() {
-    const windowSizeRef = useRef(null);
-    useEffect(() => {
-        if (windowSizeRef.current) {
-            const observer = new ResizeObserver((entries) => {
-                const entry = entries[0];
-                ROOT_DATA.windowSize = { width: entry.contentRect.width, height: entry.contentRect.height };
-            });
-            observer.observe(windowSizeRef.current);
-            return () => {
-                observer.disconnect();
-            };
-        }
-    });
-    return (_jsx("div", { ref: windowSizeRef, style: {
-            position: 'fixed',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            pointerEvents: 'none',
-        } }));
-}
 export function Root(props) {
     const { context: contextProp, children } = props;
     const windowRef = useRefExtra(() => window);
     const [{ dialogs }] = useStore(Store, ['dialogs']);
+    useEffect(() => {
+        const handleResize = () => {
+            ROOT_DATA.windowSize = { width: window.innerWidth, height: window.innerHeight };
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
     useEvent(windowRef, 'click', (e) => {
         // Check if click by keydown
         if (!(e.clientX === 0 && e.clientY === 0)) {
@@ -84,5 +69,5 @@ export function Root(props) {
         default:
             break;
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(RootContext.Provider, { value: context, children: [children, dialogs.map(({ node }) => node)] }), _jsx(Portal, { selector: () => document.body, children: _jsx(WindowSize, {}) })] }));
+    return (_jsxs(RootContext.Provider, { value: context, children: [children, dialogs.map(({ node }) => node)] }));
 }

package/select/Select.js

@@ -11,6 +11,7 @@ import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react
 import { isNull, isNumber, isUndefined } from 'lodash';
 import { createElement, forwardRef, useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CLASSES, IS_CREATED } from './vars';
+import { BaseInput } from '../base-input';
 import { Checkbox } from '../checkbox';
 import { Dropdown } from '../dropdown';
 import { Empty } from '../empty';
@@ -232,7 +233,7 @@ function SelectFC(props, ref) {
     const scrollCallback = useRef();
     const inputable = searchable && visible;
     const clearable = clearableProp && hasSelected && !visible && !loading && !disabled;
-    const inputNode = focusVisibleWrapper(createElement(searchable ? 'input' : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('select__search'), {
+    const inputNode = focusVisibleWrapper(createElement(searchable ? BaseInput : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('select__search'), {
         style: {
             opacity: inputable ? undefined : 0,
             zIndex: inputable ? undefined : -1,
@@ -352,16 +353,15 @@ function SelectFC(props, ref) {
                     }
                 }
             }
-        }, onChange: (e) => {
-            if (searchable) {
-                changeSearchValue(e.currentTarget.value);
-            }
         } }), searchable
         ? {
             type: 'text',
             value: searchValue,
             autoComplete: 'off',
             disabled,
+            onValueChange: (val) => {
+                changeSearchValue(val);
+            },
         }
         : {})));
     const [selectedNode, suffixNode, selectedLabel] = (() => {

package/table/TableFilter.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
+import { isUndefined } from 'lodash';
 import { CLASSES } from './vars';
 import { Button } from '../button';
 import { useComponentProps, useStyled, useTranslation } from '../hooks';
@@ -8,15 +9,15 @@ import { Icon } from '../icon';
 import { Input } from '../input';
 import { Popover } from '../popover';
 export function TableFilter(props) {
-    const _a = useComponentProps('TableFilter', props), { children, styleOverrides, styleProvider, content, visible, placement = 'bottom-right', placementFixed = false, escClosable = true, gap, inWindow = false, searchable = false, searchValue, modal = false, destroyAfterClose = true, zIndex, scrolling, onVisibleChange, onSearch, onReset, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "content", "visible", "placement", "placementFixed", "escClosable", "gap", "inWindow", "searchable", "searchValue", "modal", "destroyAfterClose", "zIndex", "scrolling", "onVisibleChange", "onSearch", "onReset", "afterVisibleChange"]);
+    const _a = useComponentProps('TableFilter', props), { children, styleOverrides, styleProvider, content, footer, visible, placement = 'bottom-right', placementFixed = false, escClosable = true, gap, inWindow = false, searchable = false, searchValue, modal = false, destroyAfterClose = true, zIndex, scrolling, onVisibleChange, onSearch, onReset, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "content", "footer", "visible", "placement", "placementFixed", "escClosable", "gap", "inWindow", "searchable", "searchValue", "modal", "destroyAfterClose", "zIndex", "scrolling", "onVisibleChange", "onSearch", "onReset", "afterVisibleChange"]);
     const styled = useStyled(CLASSES, { table: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.table }, styleOverrides);
     const { t } = useTranslation();
     return (_jsx(Popover, Object.assign({}, restProps, { children: children, content: _jsxs("div", Object.assign({}, styled('table__filter'), { children: [searchable && (_jsx(Input, { style: { display: 'flex' }, model: searchValue, prefix: _jsx(Icon, { children: _jsx(SearchOutlined, {}) }), placeholder: t('Search'), clearable: true, onModelChange: (value) => {
                         onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
-                    } })), content] })), footer: _jsx(Popover.Footer, { styleOverrides: { popover__footer: { style: { justifyContent: 'space-between' } } }, actions: [
+                    } })), content] })), footer: isUndefined(footer) ? (_jsx(Popover.Footer, { styleOverrides: { popover__footer: { style: { justifyContent: 'space-between' } } }, actions: [
                 _jsx(Button, { pattern: "link", onClick: () => {
                         onReset === null || onReset === void 0 ? void 0 : onReset();
                     }, children: t('Table', 'Reset') }),
                 'ok',
-            ] }), visible: visible, trigger: "click", placement: placement, placementFixed: placementFixed, arrow: false, escClosable: escClosable, gap: gap, inWindow: inWindow, modal: modal, destroyAfterClose: destroyAfterClose, zIndex: zIndex, scrolling: scrolling, onVisibleChange: onVisibleChange, afterVisibleChange: afterVisibleChange })));
+            ] })) : footer === false ? undefined : (footer), visible: visible, trigger: "click", placement: placement, placementFixed: placementFixed, arrow: false, escClosable: escClosable, gap: gap, inWindow: inWindow, modal: modal, destroyAfterClose: destroyAfterClose, zIndex: zIndex, scrolling: scrolling, onVisibleChange: onVisibleChange, afterVisibleChange: afterVisibleChange })));
 }

package/table/types.d.ts

@@ -43,6 +43,7 @@ export interface TableTdProps extends BaseProps<'table', typeof CLASSES>, React.
 export interface TableFilterProps extends BaseProps<'table', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'content'> {
     children: React.ReactElement | ((render: CloneHTMLElement) => React.ReactNode);
     content?: React.ReactNode;
+    footer?: React.ReactElement | false;
     visible?: boolean;
     placement?: PopupPlacement;
     placementFixed?: boolean;

package/time-picker/TimePicker.js

@@ -9,6 +9,7 @@ import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { TimePickerPanel } from './internal/TimePickerPanel';
 import { deepCompareDate, orderTime } from './utils';
 import { CLASSES } from './vars';
+import { BaseInput } from '../base-input';
 import { Button } from '../button';
 import dayjs from '../dayjs';
 import { useComponentProps, useControlled, useDesign, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
@@ -191,12 +192,12 @@ export const TimePicker = forwardRef((props, ref) => {
         const index = isLeft ? 0 : 1;
         const value = isLeft ? valueLeft : valueRight;
         const render = inputRender === null || inputRender === void 0 ? void 0 : inputRender[index];
-        const node = (_jsx("input", Object.assign({}, styled('time-picker__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? combineInputLeftRef : combineInputRightRef, type: "text", autoComplete: "off", value: inputValue[index], size: 10, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onChange: (e) => {
+        const node = (_jsx(BaseInput, Object.assign({}, styled('time-picker__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? combineInputLeftRef : combineInputRightRef, type: "text", autoComplete: "off", value: inputValue[index], size: 10, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onValueChange: (val) => {
                 var _a;
                 forceUpdate();
-                dataRef.current.inputValue[index] = e.currentTarget.value;
-                if (dayjs(e.currentTarget.value, format, true).isValid()) {
-                    const date = dayjs(e.currentTarget.value, format).toDate();
+                dataRef.current.inputValue[index] = val;
+                if (dayjs(val, format, true).isValid()) {
+                    const date = dayjs(val, format).toDate();
                     changeValue(date);
                     (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, date);
                 }

package/tree-select/TreeSelect.js

@@ -10,6 +10,7 @@ import { isNull, isNumber, isUndefined } from 'lodash';
 import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { TreeSelectSearchPanel } from './internal/TreeSelectSearchPanel';
 import { CLASSES } from './vars';
+import { BaseInput } from '../base-input';
 import { Dropdown } from '../dropdown';
 import { useComponentProps, useControlled, useDesign, useFocusVisible, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
@@ -237,7 +238,7 @@ function TreeSelectFC(props, ref) {
     const scrollCallback = useRef();
     const inputable = searchable && visible;
     const clearable = clearableProp && hasSelected && !visible && !loading && !disabled;
-    const inputNode = focusVisibleWrapper(createElement(searchable ? 'input' : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('tree-select__search'), {
+    const inputNode = focusVisibleWrapper(createElement(searchable ? BaseInput : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('tree-select__search'), {
         style: {
             opacity: inputable ? undefined : 0,
             zIndex: inputable ? undefined : -1,
@@ -358,16 +359,15 @@ function TreeSelectFC(props, ref) {
                     }
                 }
             }
-        }, onChange: (e) => {
-            if (searchable) {
-                changeSearchValue(e.currentTarget.value);
-            }
         } }), searchable
         ? {
             type: 'text',
             value: searchValue,
             autoComplete: 'off',
             disabled,
+            onValueChange: (val) => {
+                changeSearchValue(val);
+            },
         }
         : {})));
     const [selectedNode, suffixNode, selectedLabel] = (() => {