diff --git a/src/components/form/range/__snapshots__/dual_range.test.js.snap b/src/components/form/range/__snapshots__/dual_range.test.js.snap
index d6cc79d08b0..d9bdf8df45b 100644
--- a/src/components/form/range/__snapshots__/dual_range.test.js.snap
+++ b/src/components/form/range/__snapshots__/dual_range.test.js.snap
@@ -10,6 +10,7 @@ exports[`EuiDualRange allows value prop to accept empty strings 1`] = `
     <input
       aria-hidden="true"
       class="euiRangeSlider euiRangeSlider--hasRange euiDualRange__slider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -38,6 +39,7 @@ exports[`EuiDualRange allows value prop to accept numbers 1`] = `
     <input
       aria-hidden="true"
       class="euiRangeSlider euiRangeSlider--hasRange euiDualRange__slider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -98,6 +100,7 @@ exports[`EuiDualRange props compressed should render 1`] = `
     <input
       aria-hidden="true"
       class="euiRangeSlider euiRangeSlider--hasRange euiRangeSlider--compressed euiDualRange__slider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -151,6 +154,7 @@ exports[`EuiDualRange props custom ticks should render 1`] = `
     <input
       aria-hidden="true"
       class="euiRangeSlider euiRangeSlider--hasTicks euiRangeSlider--hasRange euiDualRange__slider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -180,6 +184,7 @@ exports[`EuiDualRange props disabled should render 1`] = `
       aria-hidden="true"
       class="euiRangeSlider euiRangeSlider--hasRange euiDualRange__slider"
       disabled=""
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -208,6 +213,7 @@ exports[`EuiDualRange props fullWidth should render 1`] = `
     <input
       aria-hidden="true"
       class="euiRangeSlider euiRangeSlider--hasRange euiDualRange__slider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -311,6 +317,7 @@ exports[`EuiDualRange props labels should render 1`] = `
     <input
       aria-hidden="true"
       class="euiRangeSlider euiRangeSlider--hasRange euiDualRange__slider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -356,6 +363,7 @@ exports[`EuiDualRange props levels should render 1`] = `
     <input
       aria-hidden="true"
       class="euiRangeSlider euiRangeSlider--hasRange euiDualRange__slider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -434,6 +442,7 @@ exports[`EuiDualRange props range should render 1`] = `
     <input
       aria-hidden="true"
       class="euiRangeSlider euiRangeSlider--hasRange euiDualRange__slider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -522,6 +531,7 @@ exports[`EuiDualRange props ticks should render 1`] = `
     <input
       aria-hidden="true"
       class="euiRangeSlider euiRangeSlider--hasTicks euiRangeSlider--hasRange euiDualRange__slider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap
index a4369a479ca..6d2a528f324 100644
--- a/src/components/form/range/__snapshots__/range.test.js.snap
+++ b/src/components/form/range/__snapshots__/range.test.js.snap
@@ -9,6 +9,7 @@ exports[`EuiRange allows value prop to accept a number 1`] = `
   >
     <input
       class="euiRangeSlider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -38,6 +39,7 @@ exports[`EuiRange allows value prop to accept empty string 1`] = `
   >
     <input
       class="euiRangeSlider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -80,6 +82,7 @@ exports[`EuiRange props compressed should render 1`] = `
   >
     <input
       class="euiRangeSlider euiRangeSlider--compressed"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -123,6 +126,7 @@ exports[`EuiRange props custom ticks should render 1`] = `
     </div>
     <input
       class="euiRangeSlider euiRangeSlider--hasTicks"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -142,6 +146,7 @@ exports[`EuiRange props disabled should render 1`] = `
     <input
       class="euiRangeSlider"
       disabled=""
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -160,6 +165,7 @@ exports[`EuiRange props fullWidth should render 1`] = `
   >
     <input
       class="euiRangeSlider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -259,6 +265,7 @@ exports[`EuiRange props labels should render 1`] = `
   >
     <input
       class="euiRangeSlider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -294,6 +301,7 @@ exports[`EuiRange props levels should render 1`] = `
     </div>
     <input
       class="euiRangeSlider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -320,6 +328,7 @@ exports[`EuiRange props range should render 1`] = `
     </div>
     <input
       class="euiRangeSlider euiRangeSlider--hasRange"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -399,6 +408,7 @@ exports[`EuiRange props ticks should render 1`] = `
     </div>
     <input
       class="euiRangeSlider euiRangeSlider--hasTicks"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
@@ -417,6 +427,7 @@ exports[`EuiRange props value should render 1`] = `
   >
     <input
       class="euiRangeSlider"
+      id="generated-id"
       max="100"
       min="0"
       step="1"
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 927da0d2332..984991a176a 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -6,6 +6,7 @@ import { keyCodes } from '../../../services';
 import { isWithinRange } from '../../../services/number';
 import { EuiInputPopover } from '../../popover';
 import { EuiFormControlLayoutDelimited } from '../form_control_layout';
+import makeId from '../form_row/make_id';
 
 import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput } from './range_input';
@@ -17,6 +18,7 @@ import { EuiRangeWrapper } from './range_wrapper';
 
 export class EuiDualRange extends Component {
   state = {
+    id: this.props.id || makeId(),
     hasFocus: false,
     rangeSliderRefAvailable: false,
     isPopoverOpen: false,
@@ -230,6 +232,14 @@ export class EuiDualRange extends Component {
     });
   };
 
+  onInputBlur = e => {
+    // Firefox returns `relatedTarget` as `null` for security reasons, but provides a proprietary `explicitOriginalTarget`
+    const relatedTarget = e.relatedTarget || e.explicitOriginalTarget;
+    if (!relatedTarget || relatedTarget.id !== this.state.id) {
+      this.closePopover();
+    }
+  };
+
   closePopover = () => {
     this.setState({
       isPopoverOpen: false,
@@ -243,7 +253,7 @@ export class EuiDualRange extends Component {
       disabled,
       fullWidth,
       readOnly,
-      id,
+      id: propsId,
       max,
       min,
       name,
@@ -261,6 +271,8 @@ export class EuiDualRange extends Component {
       ...rest
     } = this.props;
 
+    const { id } = this.state;
+
     const digitTolerance = Math.max(String(min).length, String(max).length);
     const showInputOnly = showInput === 'only';
     const canShowDropdown = showInputOnly && !readOnly && !disabled;
@@ -281,6 +293,7 @@ export class EuiDualRange extends Component {
         aria-describedby={this.props['aria-describedby']}
         aria-label={this.props['aria-label']}
         onFocus={canShowDropdown ? this.onInputFocus : undefined}
+        onBlur={canShowDropdown ? this.onInputBlur : undefined}
         readOnly={readOnly}
         autoSize={!showInputOnly}
         fullWidth={!!showInputOnly && fullWidth}
@@ -306,6 +319,7 @@ export class EuiDualRange extends Component {
         aria-describedby={this.props['aria-describedby']}
         aria-label={this.props['aria-label']}
         onFocus={canShowDropdown ? this.onInputFocus : undefined}
+        onBlur={canShowDropdown ? this.onInputBlur : undefined}
         readOnly={readOnly}
         autoSize={!showInputOnly}
         fullWidth={!!showInputOnly && fullWidth}
@@ -424,7 +438,8 @@ export class EuiDualRange extends Component {
         }
         fullWidth={fullWidth}
         isOpen={this.state.isPopoverOpen}
-        closePopover={this.closePopover}>
+        closePopover={this.closePopover}
+        disableFocusTrap={true}>
         {theRange}
       </EuiInputPopover>
     ) : (
diff --git a/src/components/form/range/dual_range.test.js b/src/components/form/range/dual_range.test.js
index 4b96afebd01..39c9a2cb947 100644
--- a/src/components/form/range/dual_range.test.js
+++ b/src/components/form/range/dual_range.test.js
@@ -4,6 +4,8 @@ import { requiredProps } from '../../../test/required_props';
 
 import { EuiDualRange } from './dual_range';
 
+jest.mock('../form_row/make_id', () => () => 'generated-id');
+
 describe('EuiDualRange', () => {
   test('is rendered', () => {
     const component = render(
diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js
index b760ecefec1..7be1b7dcc57 100644
--- a/src/components/form/range/range.js
+++ b/src/components/form/range/range.js
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import { isWithinRange } from '../../../services/number';
 import { EuiInputPopover } from '../../popover';
+import makeId from '../form_row/make_id';
 
 import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput } from './range_input';
@@ -17,6 +18,7 @@ export class EuiRange extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      id: props.id || makeId(),
       isPopoverOpen: false,
     };
   }
@@ -40,6 +42,14 @@ export class EuiRange extends Component {
     });
   };
 
+  onInputBlur = e => {
+    // Firefox returns `relatedTarget` as `null` for security reasons, but provides a proprietary `explicitOriginalTarget`
+    const relatedTarget = e.relatedTarget || e.explicitOriginalTarget;
+    if (!relatedTarget || relatedTarget.id !== this.state.id) {
+      this.closePopover();
+    }
+  };
+
   closePopover = () => {
     this.setState({
       isPopoverOpen: false,
@@ -53,7 +63,7 @@ export class EuiRange extends Component {
       disabled,
       fullWidth,
       readOnly,
-      id,
+      id: propsId,
       max,
       min,
       name,
@@ -75,6 +85,8 @@ export class EuiRange extends Component {
       ...rest
     } = this.props;
 
+    const { id } = this.state;
+
     const digitTolerance = Math.max(String(min).length, String(max).length);
     const showInputOnly = showInput === 'only';
     const canShowDropdown = showInputOnly && !readOnly && !disabled;
@@ -92,6 +104,7 @@ export class EuiRange extends Component {
         onChange={this.handleOnChange}
         name={name}
         onFocus={canShowDropdown ? this.onInputFocus : undefined}
+        onBlur={canShowDropdown ? this.onInputBlur : undefined}
         fullWidth={showInputOnly && fullWidth}
         autoSize={!showInputOnly}
         {...rest}
@@ -180,7 +193,8 @@ export class EuiRange extends Component {
         input={theInput}
         fullWidth={fullWidth}
         isOpen={this.state.isPopoverOpen}
-        closePopover={this.closePopover}>
+        closePopover={this.closePopover}
+        disableFocusTrap={true}>
         {theRange}
       </EuiInputPopover>
     ) : (
diff --git a/src/components/form/range/range.test.js b/src/components/form/range/range.test.js
index b645f82bcbf..33495ea665d 100644
--- a/src/components/form/range/range.test.js
+++ b/src/components/form/range/range.test.js
@@ -4,6 +4,8 @@ import { requiredProps } from '../../../test/required_props';
 
 import { EuiRange } from './range';
 
+jest.mock('../form_row/make_id', () => () => 'generated-id');
+
 describe('EuiRange', () => {
   test('is rendered', () => {
     const component = render(
diff --git a/src/components/popover/input_popover.tsx b/src/components/popover/input_popover.tsx
index 6659708b0aa..8145f91dfb4 100644
--- a/src/components/popover/input_popover.tsx
+++ b/src/components/popover/input_popover.tsx
@@ -15,6 +15,7 @@ import { cascadingMenuKeyCodes } from '../../services';
 
 interface EuiInputPopoverProps
   extends Omit<EuiPopoverProps, 'button' | 'buttonRef'> {
+  disableFocusTrap?: boolean;
   fullWidth?: boolean;
   input: EuiPopoverProps['button'];
   inputRef?: EuiPopoverProps['buttonRef'];
@@ -27,6 +28,7 @@ type Props = CommonProps &
 export const EuiInputPopover: FunctionComponent<Props> = ({
   children,
   className,
+  disableFocusTrap = false,
   input,
   fullWidth = false,
   ...props
@@ -68,8 +70,9 @@ export const EuiInputPopover: FunctionComponent<Props> = ({
         );
       });
       if (
-        tabbableItems.length &&
-        tabbableItems[tabbableItems.length - 1] === document.activeElement
+        disableFocusTrap ||
+        (tabbableItems.length &&
+          tabbableItems[tabbableItems.length - 1] === document.activeElement)
       ) {
         props.closePopover();
       }
@@ -96,7 +99,7 @@ export const EuiInputPopover: FunctionComponent<Props> = ({
       panelRef={panelRef}
       className={classes}
       {...props}>
-      <EuiFocusTrap clickOutsideDisables={true}>
+      <EuiFocusTrap clickOutsideDisables={true} disabled={disableFocusTrap}>
         <div onKeyDown={onKeyDown}>{children}</div>
       </EuiFocusTrap>
     </EuiPopover>