Make errors sticky in domain tooltip

src/h5web/toolbar/controls/DomainSlider/BoundEditor.tsx

@@ -1,10 +1,11 @@
 import { ReactElement, useEffect, useRef, useState } from 'react';
 import { FiCheck, FiSlash } from 'react-icons/fi';
 import { formatPreciseValue } from '../../../utils';
+import type { Bound } from '../../../vis-packs/core/models';
 import styles from './BoundEditor.module.css';
 
 interface Props {
-  label: string;
+  bound: Bound;
   value: number;
   isEditing: boolean;
   hasError: boolean;
@@ -13,9 +14,9 @@ interface Props {
 }
 
 function BoundEditor(props: Props): ReactElement {
-  const { label, value, isEditing, hasError, onEditToggle, onChange } = props;
+  const { bound, value, isEditing, hasError, onEditToggle, onChange } = props;
 
-  const id = `${label}-bound`;
+  const id = `${bound}-bound`;
   const inputRef = useRef<HTMLInputElement>(null);
 
   const [inputValue, setInputValue] = useState('');
@@ -30,11 +31,11 @@ function BoundEditor(props: Props): ReactElement {
       inputRef.current?.blur();
     }
 
-    if (isEditing && label === 'Min') {
+    if (isEditing && bound === 'min') {
       // Give focus to min field when opening tooltip in edit mode
       inputRef.current?.focus();
     }
-  }, [isEditing, label]);
+  }, [isEditing, bound]);
 
   return (
     <form
@@ -52,7 +53,7 @@ function BoundEditor(props: Props): ReactElement {
       }}
     >
       <label id={`${id}-label`} className={styles.label} htmlFor={id}>
-        {label}
+        {bound}
       </label>
 
       <input

src/h5web/toolbar/controls/DomainSlider/BoundErrorMessage.tsx

@@ -1,15 +1,33 @@
-import type { ReactElement } from 'react';
+import { ReactElement, useEffect } from 'react';
 import { FiCornerDownRight } from 'react-icons/fi';
+import { useToggle } from 'react-use';
 import { Bound, BoundError } from '../../../vis-packs/core/models';
 import styles from './DomainTooltip.module.css';
 
 interface Props {
   bound: Bound;
-  error: BoundError;
+  error?: BoundError;
 }
 
 function BoundErrorMessage(props: Props): ReactElement {
   const { bound, error } = props;
+  const [isSticky, toggleSticky] = useToggle(false);
+
+  useEffect(() => {
+    if (error) {
+      toggleSticky(true);
+    }
+  }, [error, toggleSticky]);
+
+  if (!error && isSticky) {
+    // Maintain space occupied by error when it becomes `undefined`
+    // (so the tooltip doesn't shrink and closes)
+    return <p className={styles.error} />;
+  }
+
+  if (!error) {
+    return <></>;
+  }
 
   // eslint-disable-next-line sonarjs/no-small-switch
   switch (error) {

src/h5web/toolbar/controls/DomainSlider/DomainTooltip.module.css

@@ -39,6 +39,8 @@
 }
 
 .error {
+  min-height: 2rem;
+  margin-top: -0.25rem;
   font-size: 0.9375em;
   font-weight: 600;
   color: var(--warn);

src/h5web/toolbar/controls/DomainSlider/DomainTooltip.tsx

@@ -43,21 +43,24 @@ function DomainTooltip(props: Props): ReactElement {
     <div id={id} className={styles.tooltip} role="tooltip" hidden={!open}>
       <div className={styles.tooltipInner}>
         <BoundEditor
-          label="Min"
+          bound="min"
           value={sliderDomain[0]}
           isEditing={isEditingMin}
           hasError={!!minError}
           onEditToggle={onEditMin}
           onChange={onChangeMin}
         />
+        {open && <BoundErrorMessage bound="min" error={minError} />}
+
         <BoundEditor
-          label="Max"
+          bound="max"
           value={sliderDomain[1]}
           isEditing={isEditingMax}
           hasError={!!maxError}
           onEditToggle={onEditMax}
           onChange={onChangeMax}
         />
+        {open && <BoundErrorMessage bound="max" error={maxError} />}
 
         <p className={styles.dataRange}>
           Data range{' '}
@@ -89,9 +92,6 @@ function DomainTooltip(props: Props): ReactElement {
             onChange={onAutoMaxToggle}
           />
         </p>
-
-        {minError && <BoundErrorMessage bound="min" error={minError} />}
-        {maxError && <BoundErrorMessage bound="max" error={maxError} />}
       </div>
     </div>
   );