feat: focus events management on Android picker (#258)

mateusz1913 · web-flow · commit 58ad784fb18a · 2021-05-12T02:55:52.000+09:00
diff --git a/README.md b/README.md
@@ -146,6 +146,30 @@ Add `Picker` like this:
 </Picker>
 ```
 
+If you want to open/close picker programmatically on android, pass ref to `Picker`:
+
+```javascript
+const pickerRef = useRef();
+
+function open() {
+  pickerRef.current.focus();
+}
+
+function close() {
+  pickerRef.current.blur();
+}
+
+return <Picker
+  ref={pickerRef}
+  selectedValue={selectedLanguage}
+  onValueChange={(itemValue, itemIndex) =>
+    setSelectedLanguage(itemValue)
+  }>
+  <Picker.Item label="Java" value="java" />
+  <Picker.Item label="JavaScript" value="js" />
+</Picker>
+```
+
 ### Props
 
 * [Inherited `View` props...](https://reactnative.dev/docs/view#props)
@@ -266,6 +290,28 @@ such that the total number of lines does not exceed this number. Default is '1'
 | ------- | -------- | -------- |
 | number  | No       | Android  |
 
+### `onBlur`
+
+| Type      | Required | Platform |
+| --------- | -------- | -------- |
+| function  | no       | Android  |
+
+### `onFocus`
+
+| Type      | Required | Platform |
+| --------- | -------- | -------- |
+| function  | no       | Android  |
+
+## Methods
+
+### `blur` (Android only)
+
+Programmatically closes picker
+
+### `focus` (Android only)
+
+Programmatically opens picker
+
 ## PickerItemProps
 
 Props that can be applied to individual `Picker.Item`
diff --git a/android/src/main/java/com/reactnativecommunity/picker/PickerBlurEvent.java b/android/src/main/java/com/reactnativecommunity/picker/PickerBlurEvent.java
@@ -0,0 +1,29 @@
+package com.reactnativecommunity.picker;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+public class PickerBlurEvent extends Event<PickerBlurEvent> {
+  public static final String EVENT_NAME = "topBlur";
+  @Override
+  public String getEventName() {
+    return EVENT_NAME;
+  }
+
+  public PickerBlurEvent(int id) {
+    super(id);
+  }
+
+  @Override
+  public void dispatch(RCTEventEmitter rctEventEmitter) {
+    rctEventEmitter.receiveEvent(getViewTag(), getEventName(), getEventData());
+  }
+
+  private WritableMap getEventData() {
+    WritableMap eventData = Arguments.createMap();
+    eventData.putInt("target", getViewTag());
+    return eventData;
+  }
+}
diff --git a/android/src/main/java/com/reactnativecommunity/picker/PickerFocusEvent.java b/android/src/main/java/com/reactnativecommunity/picker/PickerFocusEvent.java
@@ -0,0 +1,29 @@
+package com.reactnativecommunity.picker;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+public class PickerFocusEvent extends Event<PickerFocusEvent> {
+  public static final String EVENT_NAME = "topFocus";
+  @Override
+  public String getEventName() {
+    return EVENT_NAME;
+  }
+
+  public PickerFocusEvent(int id) {
+    super(id);
+  }
+
+  @Override
+  public void dispatch(RCTEventEmitter rctEventEmitter) {
+    rctEventEmitter.receiveEvent(getViewTag(), getEventName(), getEventData());
+  }
+
+  private WritableMap getEventData() {
+    WritableMap eventData = Arguments.createMap();
+    eventData.putInt("target", getViewTag());
+    return eventData;
+  }
+}
diff --git a/android/src/main/java/com/reactnativecommunity/picker/ReactPicker.java b/android/src/main/java/com/reactnativecommunity/picker/ReactPicker.java
@@ -30,8 +30,10 @@ public class ReactPicker extends AppCompatSpinner {
   private int mMode = Spinner.MODE_DIALOG;
   private @Nullable Integer mPrimaryColor;
   private @Nullable OnSelectListener mOnSelectListener;
+  private @Nullable OnFocusListener mOnFocusListener;
   private @Nullable Integer mStagedSelection;
   private int mOldElementSize = Integer.MIN_VALUE;
+  private boolean mIsOpen = false;
 
   private final OnItemSelectedListener mItemSelectedListener = new OnItemSelectedListener() {
     @Override
@@ -56,6 +58,11 @@ public interface OnSelectListener {
     void onItemSelected(int position);
   }
 
+  public interface OnFocusListener {
+    void onPickerBlur();
+    void onPickerFocus();
+  }
+
   public ReactPicker(Context context) {
     super(context);
     handleRTL(context);
@@ -117,6 +124,28 @@ public void requestLayout() {
     post(measureAndLayout);
   }
 
+  @Override
+  public boolean performClick() {
+    // When picker is opened, emit focus event.
+    mIsOpen = true;
+    if (mOnFocusListener != null) {
+      mOnFocusListener.onPickerFocus();
+    }
+    return super.performClick();
+  }
+
+  @Override
+  public void onWindowFocusChanged(boolean hasWindowFocus) {
+    // When view that holds picker gains focus and picker was opened,
+    // then picker lost focus, so emit blur event.
+    if (mIsOpen && hasWindowFocus) {
+      mIsOpen = false;
+      if (mOnFocusListener != null) {
+        mOnFocusListener.onPickerBlur();
+      }
+    }
+  }
+
   @Override
   protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
     super.onLayout(changed, left, top, right, bottom);
@@ -164,10 +193,16 @@ public void setOnSelectListener(@Nullable OnSelectListener onSelectListener) {
     mOnSelectListener = onSelectListener;
   }
 
+  public void setOnFocusListener(@Nullable OnFocusListener onFocusListener) {
+    mOnFocusListener = onFocusListener;
+  }
+
   @Nullable public OnSelectListener getOnSelectListener() {
     return mOnSelectListener;
   }
 
+  @Nullable public OnFocusListener getOnFocusListener() { return mOnFocusListener; }
+
   /**
    * Will cache "selection" value locally and set it only once {@link #updateStagedSelection} is
    * called
diff --git a/android/src/main/java/com/reactnativecommunity/picker/ReactPickerManager.java b/android/src/main/java/com/reactnativecommunity/picker/ReactPickerManager.java
@@ -18,15 +18,20 @@
 import android.widget.Spinner;
 import android.widget.TextView;
 
+import androidx.annotation.NonNull;
+
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.common.MapBuilder;
 import com.facebook.react.modules.i18nmanager.I18nUtil;
 import com.facebook.react.uimanager.*;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.uimanager.events.EventDispatcher;
 
+import java.util.Map;
+
 import javax.annotation.Nullable;
 
 /**
@@ -39,6 +44,36 @@
 public abstract class ReactPickerManager extends BaseViewManager<ReactPicker, ReactPickerShadowNode> {
   private static final ReadableArray EMPTY_ARRAY = Arguments.createArray();
 
+  private static final int FOCUS_PICKER = 1;
+  private static final int BLUR_PICKER = 2;
+
+  @Nullable
+  @Override
+  public Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
+    return MapBuilder.<String, Object>builder()
+        .put(
+            "topSelect",
+            MapBuilder.of(
+                "phasedRegistrationNames",
+                MapBuilder.of("bubbled", "onSelect", "captured", "onSelectCapture")))
+        .put(
+            "topFocus",
+            MapBuilder.of(
+                "phasedRegistrationNames",
+                MapBuilder.of("bubbled", "onFocus", "captured", "onFocusCapture")))
+        .put(
+            "topBlur",
+            MapBuilder.of(
+                "phasedRegistrationNames",
+                MapBuilder.of("bubbled", "onBlur", "captured", "onBlurCapture")))
+        .build();
+  }
+
+  @Override
+  public @Nullable Map<String, Integer> getCommandsMap() {
+    return MapBuilder.of("focus", FOCUS_PICKER, "blur", BLUR_PICKER);
+  }
+
   @ReactProp(name = "items")
   public void setItems(ReactPicker view, @Nullable ReadableArray items) {
     ReactPickerAdapter adapter = (ReactPickerAdapter) view.getAdapter();
@@ -104,10 +139,35 @@ protected void onAfterUpdateTransaction(ReactPicker view) {
   protected void addEventEmitters(
       final ThemedReactContext reactContext,
       final ReactPicker picker) {
-    picker.setOnSelectListener(
-            new PickerEventEmitter(
-                    picker,
-                    reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher()));
+    final PickerEventEmitter eventEmitter = new PickerEventEmitter(
+        picker,
+        reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher());
+    picker.setOnSelectListener(eventEmitter);
+    picker.setOnFocusListener(eventEmitter);
+  }
+
+  @Override
+  public void receiveCommand(@NonNull ReactPicker root, int commandId, @androidx.annotation.Nullable ReadableArray args) {
+    switch (commandId) {
+      case FOCUS_PICKER:
+        root.performClick();
+        break;
+      case BLUR_PICKER:
+        root.clearFocus();
+        break;
+    }
+  }
+
+  @Override
+  public void receiveCommand(@NonNull ReactPicker root, String commandId, @androidx.annotation.Nullable ReadableArray args) {
+    switch (commandId) {
+      case "focus":
+        root.performClick();
+        break;
+      case "blur":
+        root.clearFocus();
+        break;
+    }
   }
 
   @Override
@@ -254,7 +314,7 @@ public void setNumberOfLines(int numberOfLines) {
     }
   }
 
-  private static class PickerEventEmitter implements ReactPicker.OnSelectListener {
+  private static class PickerEventEmitter implements ReactPicker.OnSelectListener, ReactPicker.OnFocusListener {
 
     private final ReactPicker mReactPicker;
     private final EventDispatcher mEventDispatcher;
@@ -269,5 +329,15 @@ public void onItemSelected(int position) {
       mEventDispatcher.dispatchEvent( new PickerItemSelectEvent(
               mReactPicker.getId(), position));
     }
+
+    @Override
+    public void onPickerBlur() {
+      mEventDispatcher.dispatchEvent( new PickerBlurEvent(mReactPicker.getId()));
+    }
+
+    @Override
+    public void onPickerFocus() {
+      mEventDispatcher.dispatchEvent( new PickerFocusEvent(mReactPicker.getId()));
+    }
   }
 }
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -217,7 +217,7 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
     - ReactCommon/jscallinvoker (= 0.61.5)
-  - RNCPicker (1.9.8):
+  - RNCPicker (1.14.0):
     - React-Core
   - Yoga (1.14.0)
 
@@ -336,9 +336,9 @@ SPEC CHECKSUMS:
   React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
-  RNCPicker: cdeab10edac8f14ed6839fdf922a789f80c72ec1
+  RNCPicker: 1a266981fc99330c252f5f98b3f09a377a35d88c
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 
 PODFILE CHECKSUM: 895c98cb9ca5923052256783bd886330d061c5d2
 
-COCOAPODS: 1.10.0
+COCOAPODS: 1.10.1
diff --git a/example/src/PickerExample.tsx b/example/src/PickerExample.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
+import {Text, View, StyleSheet, Button} from 'react-native';
 import {Picker} from '../../js';
 
 const Item: any = Picker.Item;
@@ -167,21 +167,45 @@ function NoListenerPickerExample() {
 
 function ColorPickerExample() {
   const [value, setValue] = React.useState('red');
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isSecondFocused, setIsSecondFocused] = React.useState(false);
+  const pickerRef = React.useRef(null);
 
   return (
     <>
+      <Button
+        onPress={() => {
+          pickerRef.current?.focus?.();
+        }}
+        title="Focus"
+      />
+      <Text>{`Is input opened: ${isFocused ? 'YES' : 'NO'}`}</Text>
       <Picker
+        ref={pickerRef}
         style={styles.container}
         selectedValue={value}
+        onBlur={() => {
+          setIsFocused(false);
+        }}
+        onFocus={() => {
+          setIsFocused(true);
+        }}
         onValueChange={(v) => setValue(v)}
         mode="dropdown">
         <Item label="red" color="red" value="red" />
         <Item label="green" color="green" value="green" />
         <Item label="blue" color="blue" value="blue" />
       </Picker>
+      <Text>{`Is input opened: ${isSecondFocused ? 'YES' : 'NO'}`}</Text>
       <Picker
         style={{color: value}}
         selectedValue={value}
+        onBlur={() => {
+          setIsSecondFocused(false);
+        }}
+        onFocus={() => {
+          setIsSecondFocused(true);
+        }}
         onValueChange={(v) => setValue(v)}
         mode="dialog">
         <Item label="red" color="red" value="red" />
diff --git a/js/Picker.js b/js/Picker.js
diff --git a/js/PickerAndroid.android.js b/js/PickerAndroid.android.js
