It seems I’ll have to answer my question myself 🙂
The solution that I found is using uncontrolled form input component (substituting <TextControl>,
or more precisely, I opted to use __experimentalInputControl, with prop isPressEnterToChange={ true }
, which only updates control on pressing Enter. I did not inspect the code, but I believe firmly that it is uncontrolled and that uncontrolled <input />
would work as well. This is because uncontrolled component does not trigger react re-render and controlling of the component is given to the browser.
<InputControl
// use this in order to have uncontrolled control - otherwise updates trigger popover refresh
isPressEnterToChange={ true }
className="name-attribute"
label={ _x('Control name', 'Popup control name', 'block-form') }
value={ nameAutoSet ? '' : name }
onChange={ (name) => { setName( name ); closePopover() } }
suffix={
<Button
icon={keyboardReturn}
onClick={closePopover}
/>
}
/>