diff --git a/projects/plugins/jetpack/changelog/fix-jetpack-ai-preview-focus b/projects/plugins/jetpack/changelog/fix-jetpack-ai-preview-focus new file mode 100644 index 0000000000000..6cb84a9cac0a0 --- /dev/null +++ b/projects/plugins/jetpack/changelog/fix-jetpack-ai-preview-focus @@ -0,0 +1,4 @@ +Significance: patch +Type: bugfix + +AI Assistant: Remove autofocus on extended blocks while previewing diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/with-ai-extension.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/with-ai-extension.tsx index 9f01338eeb817..6f11f273c17f1 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/with-ai-extension.tsx +++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/with-ai-extension.tsx @@ -69,7 +69,8 @@ type CoreEditorSelect = { getCurrentPostId: () => number }; // HOC to populate the block's edit component with the AI Assistant control inpuit and toolbar button. const blockEditWithAiComponents = createHigherOrderComponent( BlockEdit => { return props => { - const { clientId, isSelected, name: blockName } = props; + // Block props. isSelectionEnabled is used to determine if the block is in the editor or in the preview. + const { clientId, isSelected, name: blockName, isSelectionEnabled } = props; // Ref to the control wrapper, its height and its ResizeObserver, for positioning adjustments. const controlRef: React.MutableRefObject< HTMLDivElement | null > = useRef( null ); const controlHeight = useRef< number >( 0 ); @@ -390,13 +391,14 @@ const blockEditWithAiComponents = createHigherOrderComponent( BlockEdit => { // Focus the input when the AI Control is displayed and set the ownerDocument. useEffect( () => { - if ( inputRef.current ) { + // Do not focus the input if the block is a preview. + if ( inputRef.current && isSelectionEnabled ) { // Save the block's ownerDocument to use it later, as the editor can be in an iframe. ownerDocument.current = inputRef.current.ownerDocument; // Focus the input when the AI Control is displayed. focusInput(); } - }, [ showAiControl, focusInput ] ); + }, [ showAiControl, focusInput, isSelectionEnabled ] ); // Adjusts the input position in the editor by increasing the block's bottom-padding // and setting the control's margin-top, "wrapping" the input with the block.