Always display input for widget title in widget edit mode.

changelog/unreleased/issue-7396.toml

@@ -0,0 +1,5 @@
+type="c"
+message="Always display input for widget title in widget edit mode."
+
+issues=["7396"]
+pulls=["19737"]

graylog2-web-interface/src/views/components/widgets/Widget.tsx

@@ -259,6 +259,7 @@ const Widget = ({ id, editing, widget, title, position, onPositionsChange }: Pro
             <WidgetHeader title={title}
                           hideDragHandle={!interactive || isFocused}
                           loading={loading}
+                          editing={editing}
                           onRename={onRenameWidget}>
               {!editing ? (
                 <WidgetActionsMenu isFocused={isFocused}

graylog2-web-interface/src/views/components/widgets/WidgetHeader.tsx

@@ -20,6 +20,7 @@ import styled, { css } from 'styled-components';
 
 import { Spinner, Icon } from 'components/common';
 import EditableTitle from 'views/components/common/EditableTitle';
+import { Input } from 'components/bootstrap';
 
 import CustomPropTypes from '../CustomPropTypes';
 
@@ -34,6 +35,11 @@ const Container = styled.div(({ theme }) => css`
   display: grid;
   grid-template-columns: minmax(35px, 1fr) max-content;
   align-items: center;
+
+  .widget-title {
+    width: 100%;
+    max-width: 400px;
+  }
 `);
 
 const Col = styled.div`
@@ -57,19 +63,48 @@ const WidgetActionDropdown = styled.span`
   position: relative;
 `;
 
+const TitleInputWrapper = styled.div`
+  max-width: 400px;
+  width: 100%;
+
+  .form-group {
+    margin-bottom: 5px;
+    width: 100%;
+  }
+`;
+
+const TitleInput = styled(Input)(({ theme }) => css`
+  font-size: ${theme.fonts.size.large};
+  width: 100%;
+`);
+
 type Props = {
   children: React.ReactNode,
   onRename: (newTitle: string) => unknown,
   hideDragHandle: boolean,
   title: string,
   loading: boolean,
+  editing: boolean,
 };
 
-const WidgetHeader = ({ children, onRename, hideDragHandle, title, loading }: Props) => (
+const WidgetHeader = ({ children, onRename, hideDragHandle, title, loading, editing }: Props) => (
   <Container>
     <Col>
       {hideDragHandle || <DragHandleContainer className="widget-drag-handle" title={`Drag handle for ${title}`}><WidgetDragHandle name="drag_indicator" /></DragHandleContainer>}
-      <EditableTitle key={title} disabled={!onRename} value={title} onChange={onRename} />
+      {editing ? (
+        <TitleInputWrapper>
+          <TitleInput type="text"
+                      id="widget-title"
+                      onChange={(e) => onRename(e.target.value)}
+                      value={title}
+                      required />
+        </TitleInputWrapper>
+      ) : (
+        <EditableTitle key={title}
+                       disabled={!onRename}
+                       value={title}
+                       onChange={onRename} />
+      )}
       {loading && <LoadingSpinner text="" delay={0} />}
     </Col>
     <WidgetActionDropdown>