blur focus #2

rectified95 · Oct 6, 2020 · 61d281f · 61d281f
1 parent d6bc240
commit 61d281f
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 20 deletions.
diff --git a/packages/playground/Samples/index.tsx b/packages/playground/Samples/index.tsx
@@ -149,6 +149,7 @@ export default class Bootstrap extends React.Component<
   constructor(props: {}) {
     super(props);
     this.inputRef = React.createRef();
+    this.viewRef = React.createRef();
     this.state = {
       checkBoxIsOn: true,
       mouseEntered: false,
@@ -161,6 +162,7 @@ export default class Bootstrap extends React.Component<
   }
 
   inputRef: React.RefObject<TextInput>;
+  viewRef: React.RefObject<View>;
 
   render() {
     return (
@@ -678,16 +680,17 @@ export default class Bootstrap extends React.Component<
             />
             <Text>Switch {this.state.switchIsOn ? 'ON' : 'OFF'}</Text>
           </View>
-          <View onFocus={this.focusTextInputReceived} style={{padding: 10}}>
+          <View style={{padding: 10}}>
             <View
-              onFocus={this.focusTextInputReceived}
-              onBlur={this.blurTextInputReceived}>
+              focusable
+              onFocus={this.focusViewReceived}
+              onBlur={this.blurViewReceived}
+              ref={this.viewRef}>
               <TouchableHighlight
                 style={{height: 30}}
                 onPress={this.focusTextInputPressed}
                 underlayColor={'transparent'}>
                 <View
-                  onFocus={this.focusTextInputReceived}
                   style={[this.state.highlightPressed ? styles.selected : {}]}>
                   <Text>Click to focus textbox</Text>
                 </View>
@@ -786,15 +789,19 @@ export default class Bootstrap extends React.Component<
     this.inputRef!.current!.focus();
   };
 
-  focusTextInputReceived = () => {
+  focusViewPressed = () => {
+    this.viewRef!.current!.focus();
+  };
+
+  focusViewReceived = () => {
     console.log('View onFocus');
   };
 
   blurTextInputPressed = () => {
     this.inputRef!.current!.blur();
   };
 
-  blurTextInputReceived = () => {
+  blurViewReceived = () => {
     console.log('View onBlur');
   };
 

diff --git a/packages/playground/Samples/view.tsx b/packages/playground/Samples/view.tsx
@@ -5,7 +5,14 @@
  */
 
 import * as React from 'react';
-import {AppRegistry, StyleSheet, Switch, Text, View} from 'react-native';
+import {
+  AppRegistry,
+  StyleSheet,
+  Switch,
+  Text,
+  View,
+  TouchableHighlight,
+} from 'react-native';
 
 export default class Bootstrap extends React.Component<
   {},
@@ -21,6 +28,7 @@ export default class Bootstrap extends React.Component<
 > {
   constructor(props: {}) {
     super(props);
+    this.viewRef = React.createRef();
     this.state = {
       focusable: true,
       hasStyle: true,
@@ -32,10 +40,12 @@ export default class Bootstrap extends React.Component<
     };
   }
 
-  focusTextInputReceived = () => {
-    console.log('this works lol');
+  focusViewPressed = () => {
+    this.viewRef!.current!.focus();
   };
 
+  viewRef: React.RefObject<View>;
+
   render() {
     const styles = StyleSheet.create({
       noBorder: {
@@ -158,6 +168,7 @@ export default class Bootstrap extends React.Component<
             backgroundColor: 'azure',
           }}>
           <View
+            ref={this.viewRef}
             focusable={this.state.focusable ? true : false}
             onFocus={() => console.log('onFocus in View!')}
             onBlur={() => console.log('onBlur in View')}
@@ -175,6 +186,14 @@ export default class Bootstrap extends React.Component<
             <Text style={styles.child}>The Text</Text>
           </View>
         </View>
+        <TouchableHighlight
+          style={{height: 30}}
+          onPress={this.focusViewPressed}
+          underlayColor={'transparent'}>
+          <View>
+            <Text>Click to focus textbox</Text>
+          </View>
+        </TouchableHighlight>
       </View>
     );
   }

diff --git a/vnext/Microsoft.ReactNative/Modules/NativeUIManager.cpp b/vnext/Microsoft.ReactNative/Modules/NativeUIManager.cpp
@@ -9,6 +9,7 @@
 #include <Views/ShadowNodeBase.h>
 #include <cdebug.h>
 #include "Modules/I18nManagerModule.h"
+#include <winrt/Windows.Foundation.h>
 #include "NativeUIManager.h"
 
 #include "CppWinRTIncludes.h"
@@ -1085,11 +1086,22 @@ void NativeUIManager::findSubviewIn(
 
   callback(args);
 }
-
+//winrt::Windows::Foundation::IAsyncOperation<winrt::Windows::UI::Xaml::Input::FocusMovementResult>
 void NativeUIManager::focus(int64_t reactTag) {
   if (auto shadowNode = static_cast<ShadowNodeBase *>(m_host->FindShadowNodeForTag(reactTag))) {
     cdebug << "NativeUIManager: inside focus()" << std::endl;
-    xaml::Input::FocusManager::TryFocusAsync(shadowNode->GetView(), winrt::FocusState::Programmatic);
+    auto focusOp{ xaml::Input::FocusManager::TryFocusAsync(shadowNode->GetView(), winrt::FocusState::Keyboard)};
+    /*for (int i = 0; i < 10000000; ++i) {
+      2348723 % 3459;
+    }*/
+    //while (!focusOp.Completed()) {
+    //  ; // busy waiting in UI thread :(
+    //}
+    winrt::Windows::UI::Xaml::Input::FocusMovementResult results = focusOp.GetResults();
+    bool isFocused = results.Succeeded();
+    if (isFocused) {
+      isFocused = isFocused;
+    }
   }
 }
 

diff --git a/vnext/Microsoft.ReactNative/Views/ViewViewManager.cpp b/vnext/Microsoft.ReactNative/Views/ViewViewManager.cpp
@@ -36,7 +36,7 @@ class ViewShadowNode : public ShadowNodeBase {
 
  public:
   ViewShadowNode() = default;
-
+  //void dispatchCommand(const std::string &commandId, const folly::dynamic &commandArgs) ;
   void createView() override {
     Super::createView();
 
@@ -60,6 +60,20 @@ class ViewShadowNode : public ShadowNodeBase {
         });
   }
 
+  void dispatchCommand(const std::string &commandId, const folly::dynamic &commandArgs) override {
+    if (commandId == "focus") {
+      if (auto reactInstance = GetViewManager()->GetReactInstance().lock()) {
+        reactInstance->NativeUIManager()->focus(m_tag);
+      }
+    } else if (commandId == "blur") {
+      if (auto reactInstance = GetViewManager()->GetReactInstance().lock()) {
+        reactInstance->NativeUIManager()->blur(m_tag);
+      }
+    } else {
+      Super::dispatchCommand(commandId, commandArgs);
+    }
+  }
+
   bool IsControl() {
     return m_isControl;
   }
@@ -207,6 +221,7 @@ class ViewShadowNode : public ShadowNodeBase {
       if (args.OriginalSource().try_as<xaml::UIElement>() == contentControl.as<xaml::UIElement>()) {
         auto tag = m_tag;
         DispatchEvent("topFocus", std::move(folly::dynamic::object("target", tag)));
+        cdebug << "Focus on element #: " << tag << std::endl;
       }
     });
 

diff --git a/vnext/ReactCopies/RNTester/js/examples/Pressable/PressableExample.js b/vnext/ReactCopies/RNTester/js/examples/Pressable/PressableExample.js
@@ -18,6 +18,7 @@ import {
   Text,
   Platform,
   View,
+  TouchableHighlight
 } from 'react-native';
 
 const { useEffect, useRef, useState } = React;
@@ -34,11 +35,16 @@ function ContentPress() {
   } else if (timesPressed > 0) {
     textLog = 'onPress';
   }
-
+  const viewRef = useRef<React.ElementRef<typeof Pressable> | null>(null);
+  const focusViewPressed = () => {
+    viewRef.current.focus();
+  };
   return (
     <>
       <View style={styles.row}>
         <Pressable
+          ref={viewRef}
+          focusable
           onFocus={() => console.log('Pressable onFocus')}
           onBlur={() => console.log('Pressable onBlur')}
           onPress={() => {
@@ -52,6 +58,14 @@ function ContentPress() {
       <View style={styles.logBox}>
         <Text testID="pressable_press_console">{textLog}</Text>
       </View>
+      <TouchableHighlight
+        style={{ height: 30 }}
+        onPress={focusViewPressed}
+        underlayColor={'transparent'}>
+        <View>
+          <Text>Click to focus textbox</Text>
+        </View>
+      </TouchableHighlight>
     </>
   );
 }

diff --git a/vnext/src/Libraries/Components/TextInput/TextInputState.windows.js b/vnext/src/Libraries/Components/TextInput/TextInputState.windows.js
@@ -16,13 +16,13 @@
 
 const React = require('react');
 const Platform = require('../../Utilities/Platform');
-const {findNodeHandle} = require('../../Renderer/shims/ReactNative');
-import {Commands as AndroidTextInputCommands} from '../../Components/TextInput/AndroidTextInputNativeComponent';
-import {Commands as iOSTextInputCommands} from '../../Components/TextInput/RCTSingelineTextInputNativeComponent';
-import {Commands as WindowsTextInputCommands} from '../../Components/TextInput/WindowsTextInputNativeCommands';
+const { findNodeHandle } = require('../../Renderer/shims/ReactNative');
+import { Commands as AndroidTextInputCommands } from '../../Components/TextInput/AndroidTextInputNativeComponent';
+import { Commands as iOSTextInputCommands } from '../../Components/TextInput/RCTSingelineTextInputNativeComponent';
+import { Commands as WindowsTextInputCommands } from '../../Components/TextInput/WindowsTextInputNativeCommands';
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import {UIManager} from 'react-native';
+import type { HostComponent } from '../../Renderer/shims/ReactNativeTypes';
+import { UIManager } from 'react-native';
 type ComponentRef = React.ElementRef<HostComponent<mixed>>;
 
 let currentlyFocusedInputRef: ?ComponentRef = null;
@@ -141,7 +141,8 @@ function blurTextInput(textField: ?ComponentRef) {
     }
     // [Windows
     else if (Platform.OS === 'windows') {
-      UIManager.blur(findNodeHandle(textField));
+      WindowsTextInputCommands.blur(textField);
+      // UIManager.blur(findNodeHandle(textField));
     }
     // Windows]
   }