From f9db4c185ad5f8e3887a5e66c5cae47932e44f13 Mon Sep 17 00:00:00 2001 From: Douglas Henri Date: Wed, 4 Sep 2024 18:07:01 -0300 Subject: [PATCH] AI Assistant: Remove autofocus on extended blocks while previewing (#39216) * remove autofocus on preview blocks * changelog --- .../jetpack/changelog/fix-jetpack-ai-preview-focus | 4 ++++ .../ai-assistant/inline-extensions/with-ai-extension.tsx | 8 +++++--- 2 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/fix-jetpack-ai-preview-focus 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.