fix(component): make Select close when option chosen with Enter key
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import {
|
import {
|
||||||
forwardRef,
|
forwardRef,
|
||||||
|
useState,
|
||||||
type CSSProperties,
|
type CSSProperties,
|
||||||
type ForwardedRef,
|
type ForwardedRef,
|
||||||
type ReactNode,
|
type ReactNode,
|
||||||
@@ -39,6 +40,7 @@ export const Select = forwardRef(function CustomSelect<TValue>(
|
|||||||
props: ExtendSelectProps & SelectUnstyledProps<TValue>,
|
props: ExtendSelectProps & SelectUnstyledProps<TValue>,
|
||||||
ref: ForwardedRef<HTMLUListElement>
|
ref: ForwardedRef<HTMLUListElement>
|
||||||
) {
|
) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const { width = '100%', style, listboxStyle, placeholder } = props;
|
const { width = '100%', style, listboxStyle, placeholder } = props;
|
||||||
const components: SelectUnstyledProps<TValue>['components'] = {
|
const components: SelectUnstyledProps<TValue>['components'] = {
|
||||||
// Root: generateStyledRoot({ width, ...style }),
|
// Root: generateStyledRoot({ width, ...style }),
|
||||||
@@ -76,7 +78,21 @@ export const Select = forwardRef(function CustomSelect<TValue>(
|
|||||||
...props.components,
|
...props.components,
|
||||||
};
|
};
|
||||||
|
|
||||||
return <SelectUnstyled {...props} ref={ref} components={components} />;
|
return (
|
||||||
|
<SelectUnstyled
|
||||||
|
listboxOpen={isOpen}
|
||||||
|
onListboxOpenChange={() => {
|
||||||
|
setIsOpen(true);
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
onChange={v => {
|
||||||
|
setIsOpen(false);
|
||||||
|
props.onChange && props.onChange(v);
|
||||||
|
}}
|
||||||
|
ref={ref}
|
||||||
|
components={components}
|
||||||
|
/>
|
||||||
|
);
|
||||||
}) as <TValue>(
|
}) as <TValue>(
|
||||||
props: ExtendSelectProps &
|
props: ExtendSelectProps &
|
||||||
SelectUnstyledProps<TValue> &
|
SelectUnstyledProps<TValue> &
|
||||||
|
|||||||
Reference in New Issue
Block a user