remove no longer required div wrapper around ValidatedDualRange (elas…

…tic#70188) * remove no longer required div wrapper around ValidatedDualRange * tslint
nreese · Jun 29, 2020 · 61b46d1 · 61b46d1
1 parent 8d524d1
commit 61b46d1
Showing 1 changed file with 25 additions and 39 deletions.
diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { i18n } from '@kbn/i18n';
-import React, { Component, createRef } from 'react';
+import React, { Component } from 'react';
 import { EuiFormRow, EuiDualRange } from '@elastic/eui';
 import { EuiFormRowDisplayKeys } from '@elastic/eui/src/components/form/form_row/form_row';
 import { EuiDualRangeProps } from '@elastic/eui/src/components/form/range/dual_range';
@@ -72,18 +72,6 @@ export class ValidatedDualRange extends Component<Props> {
     return null;
   }
 
-  // Can remove after eui#3412 is resolved
-  componentDidMount() {
-    if (this.trackRef.current) {
-      const track = this.trackRef.current.querySelector('.euiRangeTrack');
-      if (track) {
-        track.setAttribute('aria-hidden', 'true');
-      }
-    }
-  }
-
-  trackRef = createRef<HTMLDivElement>();
-
   // @ts-ignore state populated by getDerivedStateFromProps
   state: State = {};
 
@@ -119,34 +107,32 @@ export class ValidatedDualRange extends Component<Props> {
     } = this.props;
 
     return (
-      <div ref={this.trackRef}>
-        <EuiFormRow
+      <EuiFormRow
+        compressed={compressed}
+        fullWidth={fullWidth}
+        isInvalid={!this.state.isValid}
+        error={this.state.errorMessage ? [this.state.errorMessage] : []}
+        label={label}
+        display={formRowDisplay}
+      >
+        <EuiDualRange
           compressed={compressed}
           fullWidth={fullWidth}
-          isInvalid={!this.state.isValid}
-          error={this.state.errorMessage ? [this.state.errorMessage] : []}
-          label={label}
-          display={formRowDisplay}
-        >
-          <EuiDualRange
-            compressed={compressed}
-            fullWidth={fullWidth}
-            value={this.state.value}
-            onChange={this._onChange}
-            minInputProps={{
-              'aria-label': i18n.translate('kibana-react.dualRangeControl.minInputAriaLabel', {
-                defaultMessage: 'Range minimum',
-              }),
-            }}
-            maxInputProps={{
-              'aria-label': i18n.translate('kibana-react.dualRangeControl.maxInputAriaLabel', {
-                defaultMessage: 'Range maximum',
-              }),
-            }}
-            {...rest}
-          />
-        </EuiFormRow>
-      </div>
+          value={this.state.value}
+          onChange={this._onChange}
+          minInputProps={{
+            'aria-label': i18n.translate('kibana-react.dualRangeControl.minInputAriaLabel', {
+              defaultMessage: 'Range minimum',
+            }),
+          }}
+          maxInputProps={{
+            'aria-label': i18n.translate('kibana-react.dualRangeControl.maxInputAriaLabel', {
+              defaultMessage: 'Range maximum',
+            }),
+          }}
+          {...rest}
+        />
+      </EuiFormRow>
     );
   }
 }