Using isSelected for specific RichText focusing

[gregbia]

I read that focus was depreciated and replaced by isSelected but could not find detailed info on how to use it. For example I want to show an inline URL input when a RichText component is selected. I thought the following would work:

... other RichText components before

<div>

<RichText
	tagName="a"
	className="button"
	placeholder={ __( 'Button text...' ) }
	value={ buttonText }
	onChange={ ( value ) => setAttributes( { buttonText: value } ) }
/>

{ isSelected && (
	<form
		className="block-library-button__inline-link"
		onSubmit={ ( event ) => event.preventDefault() }>
		<Dashicon icon="admin-links" />
		<URLInput
			value={ buttonUrl }
			onChange={ ( value ) => setAttributes( { buttonUrl: value } ) }
		/>
		<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
	</form>
) }

</div>

... other RichText components after

Instead, the inline link shows when the entire block is clicked, not the RichText with class .button

Is isSelected not intended to be used like this?

[PeterBooker]

The prop isSelected is attached to your block as a whole, not a single component, so I do not believe you can use it like that.

I am not sure if there is a standard per component way to do this, but I do remember seeing the HTML block manually manage its own prop isPreview for achieving something similar, you can see the source here.

[youknowriad]

This is tracked here #9740 So I'm going to close this as a duplicate