onBlur event working only if i focus on another htmlEditor.

[boris1997]

bandicam.2023-10-11.18-07-18-279.mp4

[kevalkikani180]

To implement a shared editor ref for managing blur behavior, follow these steps:

Create a context for the editor ref in a new file:

`// FlowChatRefContext.js
import React, { createContext, useContext } from "react";

// Create the context
const FlowChatRefContext = createContext(null);

// Provider component to wrap around components needing access to the ref
export const FlowChatRefProvider = ({ children }: any) => {
const ref: any = React.createRef();
return (
<FlowChatRefContext.Provider value={ref}>
{children}
</FlowChatRefContext.Provider>
);
};

// Custom hook to access the ref
export const useSharedRef = () => {
const context = useContext(FlowChatRefContext);
if (!context) {
throw new Error("useSharedRef must be used within a FlowChatRefProvider");
}
return context;
};
`

Use the shared ref in your component:

const _editor = useSharedRef();

Add blur functionality to your main view by attaching it to SafeAreaView:

<SafeAreaView onTouchStart={() => _editor?.current?.blur()}> {/* Your main view content */} </SafeAreaView>

This solution ensures that the editor blurs properly by calling blur on _editor when the SafeAreaView is touched.