Only show focused toolbar for Gutenberg Block with Multiple text fields

<RichText> has a property, isSelected. When isSelected is true, the controls show. By default isSelected is representative of the current block being selected.

from the docs

isSelected: Boolean

Optional. Whether to show the input is selected or not in order to show the formatting controls. By default it renders the controls when the block is selected

isSelected is also a prop (I think?) that can be passed into edit({ isSelected }). isSelected by default works off of the current block being selected.

So the default is <RichText .. isSelected={ isSelected }>.

I used to have a solution for this, back in 2.2 when focus was used, but things have changed. Regardless, you can probably overwrite this by writing your own JS to see if the current <RichText> component is focus’ed or not. & That’ll toggle your toolbars.

UPDATE:

From one of the Gutenberg developers directly:

@youknowriad

in the current version you can use state and onFocus on RichText to keep track of the currently focused RichText, but in the next version, it should be done automatically

UPDATE 2:

Someone experienced your exact issue, shows code provided solution: https://github.com/WordPress/gutenberg/issues/6740#issuecomment-388829359