fix: incorrect dropdown positioning (#248)

* feat: searchable select with default option (changeset)

* fix: incorrect dropdown positioning

* fix: incorrect dropdown positioning

---------

Co-authored-by: Dawid Gierdal <dawid.gierdal@mobilereality.pl>

Author: dawidgierdal

.changeset/red-donkeys-whisper.md

@@ -0,0 +1,5 @@
+---
+'@mobile-reality/react-native-select-pro': patch
+---
+
+searchable select with default option

.changeset/violet-papayas-juggle.md

@@ -0,0 +1,5 @@
+---
+'@mobile-reality/react-native-select-pro': patch
+---
+
+fix incorrect dropdown positioning

packages/react-native-select-pro/src/components/select-input/select-input.hooks.ts

@@ -34,10 +34,12 @@ export const useSelectInput = () => {
         const hideSubscription = Keyboard.addListener('keyboardDidHide', async () => {
             await setOptionsListPosition();
         });
+
         dispatch({
             type: 'setSearchInputRef',
             payload: searchInputRef,
         });
+
         return () => {
             showSubscription.remove();
             hideSubscription.remove();

packages/react-native-select-pro/src/components/select/select.hooks.ts

@@ -72,13 +72,15 @@ export const useSelect = <T>({
         });
     };
 
-    const setOptionsListPosition = async () => {
+    const calculateOptionsListPosition = async (): Promise<void> => {
         const { x, y, width, height } = await measureSelectInWindow();
         const { height: optionsListHeight } = await measureOptionsListInWindow();
+
         const isOverflow = y + height + optionsListHeight > screenHeight;
         const top = isOverflow
             ? y - optionsListHeight + APPROX_STATUSBAR_HEIGHT
             : y + height - valueY + APPROX_STATUSBAR_HEIGHT;
+
         const left = I18nManager.getConstants().isRTL ? screenWidth - width - x : x;
 
         dispatch({
@@ -92,6 +94,16 @@ export const useSelect = <T>({
         });
     };
 
+    const setOptionsListPosition = async () => {
+        await calculateOptionsListPosition();
+        // Callback events are sometimes called too early,
+        // before the height value changes, so we need to
+        // make sure that this function will be called at the end of the event loop
+        setTimeout(async () => {
+            await calculateOptionsListPosition();
+        }, 10);
+    };
+
     const onPressSelectControl: OnPressSelectControlType = async () => {
         if (disabled) {
             return;