diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx
index 60b5832063..17791d76dd 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx
@@ -1,12 +1,10 @@
 import { Spacer } from '@invoke-ai/ui-library';
-import { useBoolean } from 'common/hooks/useBoolean';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
 import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton';
 import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntitySettingsWrapper } from 'features/controlLayers/components/common/CanvasEntitySettingsWrapper';
-import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
-import { CanvasEntityTitleEdit } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
+import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { ControlLayerControlAdapter } from 'features/controlLayers/components/ControlLayer/ControlLayerControlAdapter';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
@@ -18,14 +16,13 @@ type Props = {
 
 export const ControlLayer = memo(({ id }: Props) => {
   const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'control_layer' }), [id]);
-  const editing = useBoolean(false);
 
   return (
     <EntityIdentifierContext.Provider value={entityIdentifier}>
       <CanvasEntityContainer>
-        <CanvasEntityHeader onDoubleClick={editing.setTrue}>
+        <CanvasEntityHeader>
           <CanvasEntityEnabledToggle />
-          {editing.isTrue ? <CanvasEntityTitleEdit onStopEditing={editing.setFalse} /> : <CanvasEntityTitle />}
+          <CanvasEntityEditableTitle />
           <Spacer />
           <CanvasEntityDeleteButton />
         </CanvasEntityHeader>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx
index f775bf9953..f20891a66d 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx
@@ -1,11 +1,9 @@
 import { Spacer } from '@invoke-ai/ui-library';
-import { useBoolean } from 'common/hooks/useBoolean';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
 import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton';
 import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
-import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
-import { CanvasEntityTitleEdit } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
+import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { IPAdapterSettings } from 'features/controlLayers/components/IPAdapter/IPAdapterSettings';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
@@ -17,14 +15,13 @@ type Props = {
 
 export const IPAdapter = memo(({ id }: Props) => {
   const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'ip_adapter' }), [id]);
-  const editing = useBoolean(false);
 
   return (
     <EntityIdentifierContext.Provider value={entityIdentifier}>
       <CanvasEntityContainer>
-        <CanvasEntityHeader onDoubleClick={editing.setTrue}>
+        <CanvasEntityHeader>
           <CanvasEntityEnabledToggle />
-          {editing.isTrue ? <CanvasEntityTitleEdit onStopEditing={editing.setFalse} /> : <CanvasEntityTitle />}
+          <CanvasEntityEditableTitle />
           <Spacer />
           <CanvasEntityDeleteButton />
         </CanvasEntityHeader>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayer.tsx
index 50be5258e2..b5ef0a4eee 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayer.tsx
@@ -1,11 +1,9 @@
 import { Spacer } from '@invoke-ai/ui-library';
-import { useBoolean } from 'common/hooks/useBoolean';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
 import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton';
 import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
-import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
-import { CanvasEntityTitleEdit } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
+import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo, useMemo } from 'react';
@@ -16,14 +14,13 @@ type Props = {
 
 export const RasterLayer = memo(({ id }: Props) => {
   const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'raster_layer' }), [id]);
-  const editing = useBoolean(false);
 
   return (
     <EntityIdentifierContext.Provider value={entityIdentifier}>
       <CanvasEntityContainer>
-        <CanvasEntityHeader onDoubleClick={editing.setTrue}>
+        <CanvasEntityHeader>
           <CanvasEntityEnabledToggle />
-          {editing.isTrue ? <CanvasEntityTitleEdit onStopEditing={editing.setFalse} /> : <CanvasEntityTitle />}
+          <CanvasEntityEditableTitle />
           <Spacer />
           <CanvasEntityDeleteButton />
         </CanvasEntityHeader>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx
index 40a9ac2c8d..4a4a56b3ee 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx
@@ -1,11 +1,9 @@
 import { Spacer } from '@invoke-ai/ui-library';
-import { useBoolean } from 'common/hooks/useBoolean';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
 import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton';
 import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
-import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
-import { CanvasEntityTitleEdit } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
+import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { RegionalGuidanceBadges } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceBadges';
 import { RegionalGuidanceSettings } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceSettings';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
@@ -21,14 +19,13 @@ type Props = {
 
 export const RegionalGuidance = memo(({ id }: Props) => {
   const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'regional_guidance' }), [id]);
-  const editing = useBoolean(false);
 
   return (
     <EntityIdentifierContext.Provider value={entityIdentifier}>
       <CanvasEntityContainer>
-        <CanvasEntityHeader onDoubleClick={editing.setTrue}>
+        <CanvasEntityHeader>
           <CanvasEntityEnabledToggle />
-          {editing.isTrue ? <CanvasEntityTitleEdit onStopEditing={editing.setFalse} /> : <CanvasEntityTitle />}
+          <CanvasEntityEditableTitle />
           <Spacer />
           <RegionalGuidanceBadges />
           <RegionalGuidanceMaskFillColorPicker />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx
index 2e8659a51e..de34451cd3 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx
@@ -53,7 +53,7 @@ export const CanvasEntityHeader = memo(({ children, ...rest }: FlexProps) => {
   return (
     <ContextMenu renderMenu={renderMenu}>
       {(ref) => (
-        <Flex ref={ref} gap={2} alignItems="center" p={2} {...rest} cursor="text">
+        <Flex ref={ref} gap={2} alignItems="center" p={2} {...rest}>
           {children}
         </Flex>
       )}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTitle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTitle.tsx
index 79e0677cdc..b743633c50 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTitle.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTitle.tsx
@@ -1,16 +1,17 @@
+import type { TextProps } from '@invoke-ai/ui-library';
 import { Text } from '@invoke-ai/ui-library';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { useEntityIsSelected } from 'features/controlLayers/hooks/useEntityIsSelected';
 import { useEntityTitle } from 'features/controlLayers/hooks/useEntityTitle';
 import { memo } from 'react';
 
-export const CanvasEntityTitle = memo(() => {
+export const CanvasEntityTitle = memo((props: TextProps) => {
   const entityIdentifier = useEntityIdentifierContext();
   const isSelected = useEntityIsSelected(entityIdentifier);
   const title = useEntityTitle(entityIdentifier);
 
   return (
-    <Text size="sm" fontWeight="semibold" userSelect="none" color={isSelected ? 'base.100' : 'base.300'}>
+    <Text size="sm" fontWeight="semibold" userSelect="none" color={isSelected ? 'base.100' : 'base.300'} {...props}>
       {title}
     </Text>
   );
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTitleEdit.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTitleEdit.tsx
index 8021356875..91ae91e2b8 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTitleEdit.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTitleEdit.tsx
@@ -1,21 +1,20 @@
 import { Input } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { useBoolean } from 'common/hooks/useBoolean';
+import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { useEntityTitle } from 'features/controlLayers/hooks/useEntityTitle';
 import { entityNameChanged } from 'features/controlLayers/store/canvasV2Slice';
 import type { ChangeEvent, KeyboardEvent } from 'react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 
-type Props = {
-  onStopEditing: () => void;
-};
-
-export const CanvasEntityTitleEdit = memo(({ onStopEditing }: Props) => {
+export const CanvasEntityEditableTitle = memo(() => {
   const dispatch = useAppDispatch();
-  const ref = useRef<HTMLInputElement>(null);
   const entityIdentifier = useEntityIdentifierContext();
   const title = useEntityTitle(entityIdentifier);
+  const isEditing = useBoolean(false);
   const [localTitle, setLocalTitle] = useState(title);
+  const ref = useRef<HTMLInputElement>(null);
 
   const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     setLocalTitle(e.target.value);
@@ -28,8 +27,8 @@ export const CanvasEntityTitleEdit = memo(({ onStopEditing }: Props) => {
     } else if (trimmedTitle !== title) {
       dispatch(entityNameChanged({ entityIdentifier, name: trimmedTitle }));
     }
-    onStopEditing();
-  }, [dispatch, entityIdentifier, localTitle, onStopEditing, title]);
+    isEditing.setFalse();
+  }, [dispatch, entityIdentifier, isEditing, localTitle, title]);
 
   const onKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
@@ -37,16 +36,22 @@ export const CanvasEntityTitleEdit = memo(({ onStopEditing }: Props) => {
         onBlur();
       } else if (e.key === 'Escape') {
         setLocalTitle(title);
-        onStopEditing();
+        isEditing.setFalse();
       }
     },
-    [onBlur, onStopEditing, title]
+    [isEditing, onBlur, title]
   );
 
   useEffect(() => {
-    ref.current?.focus();
-    ref.current?.select();
-  }, []);
+    if (isEditing.isTrue) {
+      ref.current?.focus();
+      ref.current?.select();
+    }
+  }, [isEditing.isTrue]);
+
+  if (!isEditing.isTrue) {
+    return <CanvasEntityTitle cursor="text" onDoubleClick={isEditing.setTrue} />;
+  }
 
   return (
     <Input
@@ -61,4 +66,4 @@ export const CanvasEntityTitleEdit = memo(({ onStopEditing }: Props) => {
   );
 });
 
-CanvasEntityTitleEdit.displayName = 'CanvasEntityTitleEdit';
+CanvasEntityEditableTitle.displayName = 'CanvasEntityTitleEdit';