feat: onopen and onclose props for select

Author: rayan1810

src/components/primitives/Select/Select.tsx

@@ -59,6 +59,8 @@ const Select = ({ wrapperRef, ...props }: ISelectProps, ref: any) => {
  _item,
  _selectedItem,
  size,
+ onOpen,
+ onClose,
  ...resolvedProps
  } = usePropsResolution('Input', props, {
  isDisabled,
@@ -143,7 +145,10 @@ const Select = ({ wrapperRef, ...props }: ISelectProps, ref: any) => {
  />
  );
 
- const handleClose = () => setIsOpen(false);
+ const handleClose = () => {
+ setIsOpen(false);
+ onClose && onClose();
+ };
 
  return (
  <Box
@@ -170,6 +175,12 @@ const Select = ({ wrapperRef, ...props }: ISelectProps, ref: any) => {
  }}
  value={selectedItem === null ? tempFix : value}
  aria-label={placeholder}
+ onFocus={() => {
+ onOpen && onOpen();
+ }}
+ onBlur={() => {
+ onClose && onClose();
+ }}
  >
  <option disabled value={tempFix}>
  {placeholder}
@@ -185,6 +196,7 @@ const Select = ({ wrapperRef, ...props }: ISelectProps, ref: any) => {
  onPress={() => {
  Keyboard.dismiss();
  setIsOpen(true);
+ onOpen && onOpen();
  }}
  disabled={isDisabled}
  accessibilityLabel={accessibilityLabel}

src/components/primitives/Select/types.ts

@@ -59,6 +59,14 @@ export interface ISelectProps extends IBoxProps<ISelectProps> {
  * @default outline
  */
  variant?: 'outline' | 'filled' | 'underlined' | 'unstyled' | 'rounded';
+ /**
+ * Callback to be invoked when Select Dropdown or BottomSheet is opened.
+ */
+ onOpen?: (nativeEvent: any) => void;
+ /**
+ * Callback to be invoked when Select Dropdown or BottomSheet is closed.
+ */
+ onClose?: (nativeEvent: any) => void;
  /**
  * props to be passed to underlying ActionSheet.Content. Select uses ActionSheet underneath.
  */