Mobile - AztecView - Trigger notifyInputChange on focus/blur (#40788)

* Mobile - BlockDraggable - Set isEditingText to false and update it with the initialization of the AztecView listener * Mobile - AztecView - Move notifyInputChange to the focus/blur functions within AztecInputState, to fix an issue where these are called directly.
WordPress · May 6, 2022 · 0c34e55 · 0c34e55
1 parent 3714b15
commit 0c34e55
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/block-draggable/index.native.js b/packages/block-editor/src/components/block-draggable/index.native.js
@@ -262,9 +262,7 @@ const BlockDraggableWrapper = ( { children } ) => {
  */
 const BlockDraggable = ( { clientId, children, enabled = true } ) => {
 	const wasBeingDragged = useRef( false );
-	const [ isEditingText, setIsEditingText ] = useState(
-		RCTAztecView.InputState.isFocused()
-	);
+	const [ isEditingText, setIsEditingText ] = useState( false );
 
 	const draggingAnimation = {
 		opacity: useSharedValue( 1 ),
@@ -327,6 +325,11 @@ const BlockDraggable = ( { clientId, children, enabled = true } ) => {
 	}, [] );
 
 	useEffect( () => {
+		const isAnyAztecInputFocused = RCTAztecView.InputState.isFocused();
+		if ( isAnyAztecInputFocused ) {
+			setIsEditingText( isAnyAztecInputFocused );
+		}
+
 		RCTAztecView.InputState.addFocusChangeListener( onFocusChangeAztec );
 		return () => {
 			RCTAztecView.InputState.removeFocusChangeListener(

diff --git a/packages/react-native-aztec/src/AztecInputState.js b/packages/react-native-aztec/src/AztecInputState.js
@@ -90,6 +90,7 @@ export const notifyInputChange = () => {
  */
 export const focus = ( element ) => {
 	TextInputState.focusTextInput( element );
+	notifyInputChange();
 };
 
 /**
@@ -99,6 +100,7 @@ export const focus = ( element ) => {
  */
 export const blur = ( element ) => {
 	TextInputState.blurTextInput( element );
+	notifyInputChange();
 };
 
 /**

diff --git a/packages/react-native-aztec/src/AztecView.js b/packages/react-native-aztec/src/AztecView.js
@@ -122,8 +122,6 @@ class AztecView extends Component {
 	}
 
 	_onFocus( event ) {
-		AztecInputState.notifyInputChange();
-
 		if ( ! this.props.onFocus ) {
 			return;
 		}
@@ -136,7 +134,6 @@ class AztecView extends Component {
 		this.selectionEndCaretY = null;
 
 		AztecInputState.blur( this.aztecViewRef.current );
-		AztecInputState.notifyInputChange();
 
 		if ( ! this.props.onBlur ) {
 			return;