iOS Picker fixes

packages/core/src/components/Picker/NativePicker.ios.tsx

@@ -0,0 +1,180 @@
+import * as React from "react";
+import { StyleSheet, Keyboard } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Picker as NativePickerComponent } from "@react-native-picker/picker";
+import Portal from "../Portal/Portal";
+import { Button } from "../Button";
+import { useDeepCompareMemo } from "../../utilities";
+import {
+  CommonPickerProps,
+  SinglePickerProps,
+  normalizeToPickerOptions,
+  PickerOption,
+} from "./PickerCommon";
+import PickerInputContainer from "./PickerInputContainer";
+import { ReadTheme, withTheme } from "@draftbit/theme";
+import { IconSlot } from "../../interfaces/Icon";
+
+/**
+ * Duplicated version of NativePicker.tsx for maintaining state inside the Portal container to avoid this issue
+ * https://github.com/react-native-picker/picker/issues/615
+ */
+
+interface PortalPickerContentProps extends IconSlot {
+  value: string | number | undefined;
+  options: PickerOption[];
+  placeholder?: string;
+  onValueChange?: (value: string | number) => void;
+  onClose: () => void;
+  theme: ReadTheme;
+  autoDismissKeyboard?: boolean;
+}
+
+const PortalPickerContent: React.FC<PortalPickerContentProps> = ({
+  value,
+  options,
+  placeholder,
+  onValueChange,
+  onClose,
+  Icon,
+  theme,
+  autoDismissKeyboard = true,
+}) => {
+  const pickerRef = React.useRef<NativePickerComponent<string | number>>(null);
+
+  // Manage value state inside the Portal to avoid stale state issues across the Portal boundary
+  const [internalValue, setInternalValue] = React.useState<
+    string | number | undefined
+  >(value);
+
+  React.useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  React.useEffect(() => {
+    if (autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [autoDismissKeyboard]);
+
+  return (
+    <SafeAreaView
+      style={[
+        styles.iosPickerContent,
+        { backgroundColor: theme.colors.background.base },
+      ]}
+    >
+      <Button
+        Icon={Icon}
+        onPress={onClose}
+        style={[styles.iosButton, { color: theme.colors.branding.primary }]}
+        title="Close"
+      />
+      <NativePickerComponent
+        ref={pickerRef}
+        testID="native-picker-component"
+        selectedValue={internalValue}
+        onValueChange={(newValue) => {
+          setInternalValue(newValue);
+          if (newValue !== placeholder) {
+            onValueChange?.(newValue);
+          } else if (newValue === placeholder) {
+            onValueChange?.("");
+          }
+        }}
+        style={[
+          styles.iosNativePicker,
+          { backgroundColor: theme.colors.background.base },
+        ]}
+        onBlur={onClose}
+      >
+        {options.map((option) => (
+          <NativePickerComponent.Item
+            testID="native-picker-item"
+            label={option.label.toString()}
+            value={option.value}
+            key={option.value}
+            color={theme.colors.text.strong}
+          />
+        ))}
+      </NativePickerComponent>
+    </SafeAreaView>
+  );
+};
+
+const NativePicker: React.FC<CommonPickerProps & SinglePickerProps> = ({
+  options: optionsProp = [],
+  onValueChange,
+  Icon,
+  placeholder,
+  value,
+  autoDismissKeyboard = true,
+  theme,
+  disabled,
+  ...rest
+}) => {
+  const [pickerVisible, setPickerVisible] = React.useState(false);
+
+  const options = useDeepCompareMemo(() => {
+    const normalizedOptions = normalizeToPickerOptions(optionsProp);
+
+    // Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+    // Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+    if (placeholder) {
+      return [{ label: placeholder, value: placeholder }, ...normalizedOptions];
+    } else {
+      return normalizedOptions;
+    }
+  }, [placeholder, optionsProp]);
+
+  // When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
+  if (!placeholder && options.length && !value && value !== options[0].value) {
+    onValueChange?.(options[0].value);
+  }
+
+  return (
+    <PickerInputContainer
+      testID="native-picker"
+      Icon={Icon}
+      placeholder={placeholder}
+      selectedValue={value}
+      options={options}
+      onPress={() => setPickerVisible(!pickerVisible)}
+      disabled={disabled}
+      {...rest}
+    >
+      {pickerVisible && !disabled && (
+        <Portal>
+          <PortalPickerContent
+            value={value}
+            options={options}
+            placeholder={placeholder}
+            onValueChange={onValueChange}
+            onClose={() => setPickerVisible(false)}
+            Icon={Icon}
+            theme={theme}
+            autoDismissKeyboard={autoDismissKeyboard}
+          />
+        </Portal>
+      )}
+    </PickerInputContainer>
+  );
+};
+
+const styles = StyleSheet.create({
+  iosNativePicker: {
+    backgroundColor: "white",
+  },
+  iosPickerContent: {
+    width: "100%",
+    position: "absolute",
+    bottom: 0,
+    backgroundColor: "white",
+  },
+  iosButton: {
+    backgroundColor: "transparent",
+    borderWidth: 0,
+  },
+});
+
+export default withTheme(NativePicker);

packages/core/src/components/Picker/NativePicker.tsx

@@ -1,9 +1,6 @@
 import * as React from "react";
 import { StyleSheet, Platform, Keyboard } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
 import { Picker as NativePickerComponent } from "@react-native-picker/picker";
-import Portal from "../Portal/Portal";
-import { Button } from "../Button";
 import { useDeepCompareMemo } from "../../utilities";
 import {
   CommonPickerProps,
@@ -13,7 +10,6 @@ import {
 import PickerInputContainer from "./PickerInputContainer";
 import { withTheme } from "@draftbit/theme";
 
-const isIos = Platform.OS === "ios";
 const isAndroid = Platform.OS === "android";
 const isWeb = Platform.OS === "web";
 
@@ -61,7 +57,7 @@ const NativePicker: React.FC<CommonPickerProps & SinglePickerProps> = ({
           onValueChange?.("");
         }
       }}
-      style={isIos ? styles.iosNativePicker : styles.nativePicker}
+      style={styles.nativePicker}
       onBlur={() => setPickerVisible(false)}
     >
       {options.map((option) => (
@@ -75,29 +71,6 @@ const NativePicker: React.FC<CommonPickerProps & SinglePickerProps> = ({
     </NativePickerComponent>
   );
 
-  const renderPicker = () => {
-    if (isIos) {
-      return (
-        <Portal>
-          <SafeAreaView style={styles.iosPickerContent}>
-            <Button
-              Icon={Icon}
-              onPress={() => setPickerVisible(!pickerVisible)}
-              style={[
-                styles.iosButton,
-                { color: theme.colors.branding.primary },
-              ]}
-              title="Close"
-            />
-            {renderNativePicker()}
-          </SafeAreaView>
-        </Portal>
-      );
-    } else {
-      return renderNativePicker();
-    }
-  };
-
   React.useEffect(() => {
     if (pickerVisible && pickerRef.current) {
       pickerRef?.current?.focus();
@@ -123,7 +96,9 @@ const NativePicker: React.FC<CommonPickerProps & SinglePickerProps> = ({
     >
       {/* Web version is collapsed by default, always show to allow direct expand */}
       {/* Android version needs to always be visible to allow .focus() call to launch the dialog  */}
-      {(pickerVisible || isAndroid || isWeb) && !disabled && renderPicker()}
+      {(pickerVisible || isAndroid || isWeb) &&
+        !disabled &&
+        renderNativePicker()}
     </PickerInputContainer>
   );
 };
@@ -141,26 +116,13 @@ const styles = StyleSheet.create({
     opacity: 0,
     ...Platform.select({
       web: {
-        height: "100%", //To have the <select/> element fill the height
+        height: "100%",
       },
       android: {
-        opacity: 0, // picker is a dialog, we don't want to show the default 'picker button' component
+        opacity: 0,
       },
     }),
   },
-  iosNativePicker: {
-    backgroundColor: "white",
-  },
-  iosPickerContent: {
-    width: "100%",
-    position: "absolute",
-    bottom: 0,
-    backgroundColor: "white",
-  },
-  iosButton: {
-    backgroundColor: "transparent",
-    borderWidth: 0,
-  },
 });
 
 export default withTheme(NativePicker);