[Controls] Range slider a11y and performance improvements

src/plugins/controls/common/control_group/control_group_panel_diff_system.ts

@@ -10,6 +10,7 @@ import deepEqual from 'fast-deep-equal';
 import { omit, isEqual } from 'lodash';
 import { OPTIONS_LIST_DEFAULT_SORT } from '../options_list/suggestions_sorting';
 import { OptionsListEmbeddableInput, OPTIONS_LIST_CONTROL } from '../options_list/types';
+import { RangeSliderEmbeddableInput, RANGE_SLIDER_CONTROL } from '../range_slider/types';
 
 import { ControlPanelState } from './types';
 
@@ -26,6 +27,19 @@ export const genericControlPanelDiffSystem: DiffSystem = {
 export const ControlPanelDiffSystems: {
   [key: string]: DiffSystem;
 } = {
+  [RANGE_SLIDER_CONTROL]: {
+    getPanelIsEqual: (initialInput, newInput) => {
+      if (!deepEqual(omit(initialInput, 'explicitInput'), omit(newInput, 'explicitInput'))) {
+        return false;
+      }
+
+      const { value: valueA = ['', ''] }: Partial<RangeSliderEmbeddableInput> =
+        initialInput.explicitInput;
+      const { value: valueB = ['', ''] }: Partial<RangeSliderEmbeddableInput> =
+        newInput.explicitInput;
+      return isEqual(valueA, valueB);
+    },
+  },
   [OPTIONS_LIST_CONTROL]: {
     getPanelIsEqual: (initialInput, newInput) => {
       if (!deepEqual(omit(initialInput, 'explicitInput'), omit(newInput, 'explicitInput'))) {

src/plugins/controls/common/range_slider/types.ts

@@ -13,7 +13,7 @@ export const RANGE_SLIDER_CONTROL = 'rangeSliderControl';
 export type RangeValue = [string, string];
 
 export interface RangeSliderEmbeddableInput extends DataControlInput {
-  value: RangeValue;
+  value?: RangeValue;
 }
 
 export type RangeSliderInputWithType = Partial<RangeSliderEmbeddableInput> & { type: string };

src/plugins/controls/public/options_list/components/options_list.scss

@@ -33,7 +33,7 @@
   color: $euiTextSubduedColor;
   text-decoration: line-through;
   margin-left: $euiSizeS;
-  font-weight: 300;
+  font-weight: $euiFontWeightRegular;
 }
 
 .optionsList__existsFilter {

src/plugins/controls/public/range_slider/components/range_slider.scss

@@ -17,42 +17,36 @@
 }
 
 .rangeSliderAnchor__button {
-  display: flex;
-  align-items: center;
   width: 100%;
   height: 100%;
-  justify-content: space-between;
   background-color: $euiFormBackgroundColor;
-  @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'right', $internal: true);
+  padding: 0;
+
+  .euiFormControlLayout__childrenWrapper {
+    border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0 !important;
+  }
 
   .euiToolTipAnchor {
     width: 100%;
   }
 
-  .rangeSliderAnchor__delimiter {
-    background-color: unset;
-    padding: $euiSizeS*1.5 0;
-  }
   .rangeSliderAnchor__fieldNumber {
     font-weight: $euiFontWeightBold;
     box-shadow: none;
     text-align: center;
     background-color: unset;
 
+    &:invalid {
+      color: $euiTextSubduedColor;
+      text-decoration: line-through;
+      font-weight: $euiFontWeightRegular;
+      background-image: none; // hide the red bottom border
+    }
+
     &::placeholder {
       font-weight: $euiFontWeightRegular;
       color: $euiColorMediumShade;
       text-decoration: none;
     }
   }
-
-  .rangeSliderAnchor__fieldNumber--invalid {
-    text-decoration: line-through;
-    font-weight: $euiFontWeightRegular;
-    color: $euiColorMediumShade;
-  }
-
-  .rangeSliderAnchor__spinner {
-    padding-right: $euiSizeS;
-  }
 }

src/plugins/controls/public/range_slider/components/range_slider_button.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import { EuiFieldNumber, EuiFormControlLayoutDelimited } from '@elastic/eui';
+
+import './range_slider.scss';
+import { RangeValue } from '../../../common/range_slider/types';
+import { useRangeSlider } from '../embeddable/range_slider_embeddable';
+
+export const RangeSliderButton = ({
+  value,
+  onClick,
+  onChange,
+}: {
+  value: RangeValue;
+  onChange: (newRange: RangeValue) => void;
+  onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}) => {
+  const rangeSlider = useRangeSlider();
+
+  const min = rangeSlider.select((state) => state.componentState.min);
+  const max = rangeSlider.select((state) => state.componentState.max);
+  const isInvalid = rangeSlider.select((state) => state.componentState.isInvalid);
+
+  const id = rangeSlider.select((state) => state.explicitInput.id);
+
+  const isLoading = rangeSlider.select((state) => state.output.loading);
+
+  return (
+    <EuiFormControlLayoutDelimited
+      fullWidth
+      onClick={onClick}
+      isLoading={isLoading}
+      className="rangeSliderAnchor__button"
+      data-test-subj={`range-slider-control-${id}`}
+      startControl={
+        <EuiFieldNumber
+          controlOnly
+          fullWidth
+          value={value[0] === String(min) ? '' : value[0]}
+          onChange={(event) => {
+            onChange([event.target.value, value[1]]);
+          }}
+          placeholder={String(min)}
+          isInvalid={isInvalid}
+          className={'rangeSliderAnchor__fieldNumber'}
+          data-test-subj={'rangeSlider__lowerBoundFieldNumber'}
+        />
+      }
+      endControl={
+        <EuiFieldNumber
+          controlOnly
+          fullWidth
+          value={value[1] === String(max) ? '' : value[1]}
+          onChange={(event) => {
+            onChange([value[0], event.target.value]);
+          }}
+          placeholder={String(max)}
+          isInvalid={isInvalid}
+          className={'rangeSliderAnchor__fieldNumber'}
+          data-test-subj={'rangeSlider__upperBoundFieldNumber'}
+        />
+      }
+    />
+  );
+};

src/plugins/controls/public/range_slider/components/range_slider_control.tsx

@@ -6,117 +6,57 @@
  * Side Public License, v 1.
  */
 
-import React, { FC, useState, useRef } from 'react';
+import { debounce } from 'lodash';
+import React, { FC, useState, useRef, useMemo, useEffect } from 'react';
 
-import {
-  EuiFieldNumber,
-  EuiText,
-  EuiInputPopover,
-  EuiLoadingSpinner,
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '@elastic/eui';
+import { EuiInputPopover } from '@elastic/eui';
 
 import { useRangeSlider } from '../embeddable/range_slider_embeddable';
 import { RangeSliderPopover, EuiDualRangeRef } from './range_slider_popover';
 
-import './range_slider.scss';
 import { ControlError } from '../../control_group/component/control_error_component';
-
-const INVALID_CLASS = 'rangeSliderAnchor__fieldNumber--invalid';
+import { RangeValue } from '../../../common/range_slider/types';
+import { RangeSliderButton } from './range_slider_button';
+import './range_slider.scss';
 
 export const RangeSliderControl: FC = () => {
   const rangeRef = useRef<EuiDualRangeRef>(null);
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
   const rangeSlider = useRangeSlider();
 
-  const min = rangeSlider.select((state) => state.componentState.min);
-  const max = rangeSlider.select((state) => state.componentState.max);
   const error = rangeSlider.select((state) => state.componentState.error);
-  const isInvalid = rangeSlider.select((state) => state.componentState.isInvalid);
-
-  const id = rangeSlider.select((state) => state.explicitInput.id);
-  const value = rangeSlider.select((state) => state.explicitInput.value) ?? ['', ''];
-  const isLoading = rangeSlider.select((state) => state.output.loading);
-
-  const hasAvailableRange = min !== '' && max !== '';
+  const value = rangeSlider.select((state) => state.explicitInput.value);
+  const [displayedValue, setDisplayedValue] = useState<RangeValue>(value ?? ['', '']);
 
-  const hasLowerBoundSelection = value[0] !== '';
-  const hasUpperBoundSelection = value[1] !== '';
+  const debouncedOnChange = useMemo(
+    () =>
+      debounce((newRange: RangeValue) => {
+        rangeSlider.dispatch.setSelectedRange(newRange);
+      }, 750),
+    [rangeSlider.dispatch]
+  );
 
-  const lowerBoundValue = parseFloat(value[0]);
-  const upperBoundValue = parseFloat(value[1]);
-  const minValue = parseFloat(min);
-  const maxValue = parseFloat(max);
+  useEffect(() => {
+    debouncedOnChange(displayedValue);
+  }, [debouncedOnChange, displayedValue]);
 
-  // EuiDualRange can only handle integers as min/max
-  const roundedMin = hasAvailableRange ? Math.floor(minValue) : minValue;
-  const roundedMax = hasAvailableRange ? Math.ceil(maxValue) : maxValue;
+  useEffect(() => {
+    setDisplayedValue(value ?? ['', '']);
+  }, [value]);
 
   const button = (
-    <button
-      onClick={() => setIsPopoverOpen(!isPopoverOpen)}
-      className="rangeSliderAnchor__button"
-      data-test-subj={`range-slider-control-${id}`}
-    >
-      <EuiFlexGroup gutterSize="none" responsive={false}>
-        <EuiFlexItem>
-          <EuiFieldNumber
-            controlOnly
-            fullWidth
-            className={`rangeSliderAnchor__fieldNumber ${
-              hasLowerBoundSelection && isInvalid ? INVALID_CLASS : ''
-            }`}
-            value={hasLowerBoundSelection ? lowerBoundValue : ''}
-            onChange={(event) => {
-              rangeSlider.dispatch.setSelectedRange([
-                event.target.value,
-                isNaN(upperBoundValue) ? '' : String(upperBoundValue),
-              ]);
-            }}
-            disabled={isLoading}
-            placeholder={`${hasAvailableRange ? roundedMin : ''}`}
-            isInvalid={isInvalid}
-            data-test-subj="rangeSlider__lowerBoundFieldNumber"
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiText className="rangeSliderAnchor__delimiter" size="s" color="subdued">
-            →
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiFieldNumber
-            controlOnly
-            fullWidth
-            className={`rangeSliderAnchor__fieldNumber ${
-              hasUpperBoundSelection && isInvalid ? INVALID_CLASS : ''
-            }`}
-            value={hasUpperBoundSelection ? upperBoundValue : ''}
-            onChange={(event) => {
-              rangeSlider.dispatch.setSelectedRange([
-                isNaN(lowerBoundValue) ? '' : String(lowerBoundValue),
-                event.target.value,
-              ]);
-            }}
-            disabled={isLoading}
-            placeholder={`${hasAvailableRange ? roundedMax : ''}`}
-            isInvalid={isInvalid}
-            data-test-subj="rangeSlider__upperBoundFieldNumber"
-          />
-        </EuiFlexItem>
-        {isLoading ? (
-          <EuiFlexItem
-            grow={false}
-            className="rangeSliderAnchor__spinner"
-            data-test-subj="range-slider-loading-spinner"
-          >
-            <EuiLoadingSpinner />
-          </EuiFlexItem>
-        ) : null}
-      </EuiFlexGroup>
-    </button>
+    <RangeSliderButton
+      value={displayedValue}
+      onChange={setDisplayedValue}
+      onClick={(event) => {
+        // the popover should remain open if the click target is one of the number inputs
+        if (isPopoverOpen && event.target instanceof HTMLInputElement) {
+          return;
+        }
+        setIsPopoverOpen(!isPopoverOpen);
+      }}
+    />
   );
 
   return error ? (
@@ -130,15 +70,17 @@ export const RangeSliderControl: FC = () => {
       className="rangeSlider__popoverOverride"
       anchorClassName="rangeSlider__anchorOverride"
       panelClassName="rangeSlider__panelOverride"
-      closePopover={() => setIsPopoverOpen(false)}
+      closePopover={() => {
+        setIsPopoverOpen(false);
+      }}
       anchorPosition="downCenter"
       attachToAnchor={false}
       disableFocusTrap
       onPanelResize={(width) => {
         rangeRef.current?.onResize(width);
       }}
     >
-      <RangeSliderPopover rangeRef={rangeRef} />
+      <RangeSliderPopover rangeRef={rangeRef} value={displayedValue} onChange={setDisplayedValue} />
     </EuiInputPopover>
   );
 };