block editor – Popover in a LinkControl style
I created an TextControl
inside Popover
component, which opens when block toolbar button is pressed. It works fine, with one annoying problem. When user types in TextControl, React redraw of component is triggered and annoying Popover animation happens on each typed character. This does not happen in LinkControl
component, which also has Popover as top component. How to achieve this, I could not figure it out from the Gutenberg code? In my excerpt from the code, you’ll see that I tried to prevent re-rendering with ref, but without success. I could set animate prop on Popover to be disabled upon text is entered in Textcontrol, but his is not how LinkControl works.
...
const [isInputDialogVisible, setIsInputDialogVisible] = useState(false);
// attempt to prevent re-rendering
const focusOnMount = useRef( 'firstElement' );
const InputNameDialog = () =>
<Popover
onClose={() => { setIsInputDialogVisible(false) }}
focusOnMount={focusOnMount.current}
>
<TextControl
className="name-attribute"
label={ _x('Control name', 'Popup control name', 'namespace') }
help={ _x('This is title of field', 'Popup help text', 'namespace') }
value={ attributes.nameAutoSet ? '' : attributes.name }
onChange={ (name) => setName({ name }) }
/>
</Popover>
...
<BlockControls group="block">
<ToolbarButton
onClick={() => { setIsInputDialogVisible(true) }}
icon="nametag"
>
{ isInputDialogVisible && <InputNameDialog /> }
</ToolbarButton>
</BlockControls>
...
So, my question is how to set up the code so it works as LinkControl, preventing redrawing of the component when text is entered in TextControl?
Leave an answer