Skip to content

Commit

Permalink
Fix: Focus loss on navigation link label editing on Firefox. (#52428)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgefilipecosta
jorgefilipecosta authored Jul 10, 2023
1 parent 9afcae6 commit 5aeb1d8
Showing 1 changed file with 59 additions and 45 deletions.
104 changes: 59 additions & 45 deletions packages/block-library/src/navigation-link/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,10 @@ export default function NavigationLinkEdit( {
const itemLabelPlaceholder = __( 'Add label…' );
const ref = useRef();

// Change the label using inspector causes rich text to change focus on firefox.
// This is a workaround to keep the focus on the label field when label filed is focused we don't render the rich text.
const [ isLabelFieldFocused, setIsLabelFieldFocused ] = useState( false );

const {
innerBlocks,
isAtMaxNesting,
Expand Down Expand Up @@ -424,6 +428,8 @@ export default function NavigationLinkEdit( {
} }
label={ __( 'Label' ) }
autoComplete="off"
onFocus={ () => setIsLabelFieldFocused( true ) }
onBlur={ () => setIsLabelFieldFocused( false ) }
/>
<TextControl
__nextHasNoMarginBottom
Expand Down Expand Up @@ -492,52 +498,56 @@ export default function NavigationLinkEdit( {
</div>
) : (
<>
{ ! isInvalid && ! isDraft && (
<>
<RichText
ref={ ref }
identifier="label"
className="wp-block-navigation-item__label"
value={ label }
onChange={ ( labelValue ) =>
setAttributes( {
label: labelValue,
} )
}
onMerge={ mergeBlocks }
onReplace={ onReplace }
__unstableOnSplitAtEnd={ () =>
insertBlocksAfter(
createBlock(
'core/navigation-link'
{ ! isInvalid &&
! isDraft &&
! isLabelFieldFocused && (
<>
<RichText
ref={ ref }
identifier="label"
className="wp-block-navigation-item__label"
value={ label }
onChange={ ( labelValue ) =>
setAttributes( {
label: labelValue,
} )
}
onMerge={ mergeBlocks }
onReplace={ onReplace }
__unstableOnSplitAtEnd={ () =>
insertBlocksAfter(
createBlock(
'core/navigation-link'
)
)
)
}
aria-label={ __(
'Navigation link text'
) }
placeholder={ itemLabelPlaceholder }
withoutInteractiveFormatting
allowedFormats={ [
'core/bold',
'core/italic',
'core/image',
'core/strikethrough',
] }
onClick={ () => {
if ( ! url ) {
setIsLinkOpen( true );
}
} }
/>
{ description && (
<span className="wp-block-navigation-item__description">
{ description }
</span>
) }
</>
) }
{ ( isInvalid || isDraft ) && (
aria-label={ __(
'Navigation link text'
) }
placeholder={ itemLabelPlaceholder }
withoutInteractiveFormatting
allowedFormats={ [
'core/bold',
'core/italic',
'core/image',
'core/strikethrough',
] }
onClick={ () => {
if ( ! url ) {
setIsLinkOpen( true );
}
} }
/>
{ description && (
<span className="wp-block-navigation-item__description">
{ description }
</span>
) }
</>
) }
{ ( isInvalid ||
isDraft ||
isLabelFieldFocused ) && (
<div className="wp-block-navigation-link__placeholder-text wp-block-navigation-link__label">
<Tooltip
position="top center"
Expand All @@ -557,7 +567,11 @@ export default function NavigationLinkEdit( {
// See `updateAttributes` for more details.
`${ decodeEntities(
label
) } ${ placeholderText }`.trim()
) } ${
isInvalid || isDraft
? placeholderText
: ''
}`.trim()
}
</span>
<span className="wp-block-navigation-link__missing_text-tooltip">
Expand Down

1 comment on commit 5aeb1d8

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 5aeb1d8.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5507156276
📝 Reported issues:

Please sign in to comment.