[EuiDataGrid] Allow clearing the "Lines per row" input (#7338)

elastic · Nov 3, 2023 · b02248c · b02248c
1 parent 3e26532
commit b02248c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/src/components/datagrid/controls/display_selector.test.tsx b/src/components/datagrid/controls/display_selector.test.tsx
@@ -368,19 +368,28 @@ describe('useDataGridDisplaySelector', () => {
           expect(getLineCountNumber(component)).toEqual(3);
         });
 
-        it('does not allow zero or negative line count values', () => {
+        it('updates the input but not the grid display if an invalid number is passed', () => {
+          const onChange = jest.fn();
+
           const component = mount(
             <MockComponent
-              rowHeightsOptions={{ defaultHeight: { lineCount: 2 } }}
+              rowHeightsOptions={{ defaultHeight: { lineCount: 2 }, onChange }}
             />
           );
           openPopover(component);
 
-          setLineCountNumber(component, 0);
-          expect(getLineCountNumber(component)).toEqual(2);
+          const assertInvalidNumber = (value: number) => {
+            setLineCountNumber(component, value);
 
-          setLineCountNumber(component, -50);
-          expect(getLineCountNumber(component)).toEqual(2);
+            const input = component.find('input[type="number"]').getDOMNode();
+            expect((input as HTMLInputElement).value).toEqual(String(value));
+
+            expect(input).toBeInvalid();
+            expect(onChange).not.toHaveBeenCalled();
+          };
+
+          assertInvalidNumber(0);
+          assertInvalidNumber(-50);
         });
 
         it('correctly resets lineCount to initial developer-passed state', () => {

diff --git a/src/components/datagrid/controls/display_selector.tsx b/src/components/datagrid/controls/display_selector.tsx
@@ -87,6 +87,7 @@ const convertRowHeightsOptionsToSelection = (
   }
   return rowHeightButtonOptions[0];
 };
+const defaultLineCountValue = String(2);
 
 export const useDataGridDisplaySelector = (
   showDisplaySelector: EuiDataGridToolBarVisibilityOptions['showDisplaySelector'],
@@ -125,7 +126,7 @@ export const useDataGridDisplaySelector = (
   }, []);
 
   // Row height logic
-  const [lineCount, setLineCount] = useState(2);
+  const [lineCountInput, setLineCountInput] = useState(defaultLineCountValue);
   const setRowHeight = useCallback(
     (option: string) => {
       const rowHeightsOptions: EuiDataGridRowHeightsOptions = {
@@ -135,26 +136,28 @@ export const useDataGridDisplaySelector = (
       if (option === 'auto') {
         rowHeightsOptions.defaultHeight = 'auto';
       } else if (option === 'lineCount') {
-        rowHeightsOptions.defaultHeight = { lineCount };
+        rowHeightsOptions.defaultHeight = { lineCount: Number(lineCountInput) };
       } else {
         rowHeightsOptions.defaultHeight = undefined;
       }
 
       setUserRowHeightsOptions(rowHeightsOptions);
     },
-    [lineCount]
+    [lineCountInput]
   );
   const setLineCountHeight = useCallback<
     NonNullable<EuiRangeProps['onChange']>
   >((event) => {
+    setLineCountInput(event.currentTarget.value);
     const newLineCount = Number(event.currentTarget.value);
-    if (newLineCount < 1) return; // Don't let users set a 0 or negative line count
 
-    setLineCount(newLineCount);
-    setUserRowHeightsOptions({
-      rowHeights: {}, // Unset all row-specific line counts
-      defaultHeight: { lineCount: newLineCount },
-    });
+    // Don't let users set a 0 or negative line count
+    if (newLineCount > 0) {
+      setUserRowHeightsOptions({
+        rowHeights: {}, // Unset all row-specific line counts
+        defaultHeight: { lineCount: newLineCount },
+      });
+    }
   }, []);
 
   // Merge the developer-specified configurations with user overrides
@@ -182,8 +185,10 @@ export const useDataGridDisplaySelector = (
   }, [rowHeightsOptions]);
 
   useEffect(() => {
-    // @ts-ignore - optional chaining operator handles types & cases that aren't lineCount
-    setLineCount(rowHeightsOptions?.defaultHeight?.lineCount || 2);
+    setLineCountInput(
+      // @ts-ignore - optional chaining operator handles types & cases that aren't lineCount
+      rowHeightsOptions?.defaultHeight?.lineCount || defaultLineCountValue
+    );
     // @ts-ignore - same as above
   }, [rowHeightsOptions?.defaultHeight?.lineCount]);
 
@@ -353,7 +358,8 @@ export const useDataGridDisplaySelector = (
                       min={1}
                       max={20}
                       step={1}
-                      value={lineCount}
+                      required
+                      value={lineCountInput}
                       onChange={setLineCountHeight}
                       data-test-subj="lineCountNumber"
                     />

diff --git a/upcoming_changelogs/7338.md b/upcoming_changelogs/7338.md
@@ -0,0 +1 @@
+- `EuiDataGrid`'s display settings popover now allows users to clear the "Lines per row" input before typing in a new number
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- `EuiDataGrid`'s display settings popover now allows users to clear the "Lines per row" input before typing in a new number