···

       
160
       
 
       
  cy.get('@input')

     

       
161
       
 
       
    .should('have.focus')

     

       
162
       
 
       
    .should('have.value', 'test');

     

       
163
       
-
       


     

       
164
       
-
       
  // pressing escape should refocus input

     

       
165
       
-
       
  cy.get('li').first().focus();

     

       
166
       
-
       
  cy.realPress('Escape');

     

       
167
       
-
       
  cy.get('@input').should('have.focus');

     

       
168
       
 
       
});

     

       
169
       
 
       


     

       
170
       
 
       
it('supports nested dialogs', () => {

     

       
171
       
-
       
  const InnerDialog = () => {

     

       
172
       
 
       
    const ref = useRef<HTMLUListElement>(null);

     

       
173
       
-
       
    useDialogFocus(ref);

     

       
174
       
 
       


     

       
175
       
 
       
    return (

     

       
176
       
 
       
      <ul ref={ref} role="dialog">

     
···

       
195
       
 
       
          <ul ref={ref} role="dialog">

     

       
196
       
 
       
            <li tabIndex={0}>Outer #1</li>

     

       
197
       
 
       
            <li tabIndex={0} onFocus={() => setNested(true)}>Outer #2</li>

     

       
198
       
-
       
            {nested && <InnerDialog />}

     

       
199
       
 
       
          </ul>

     

       
200
       
 
       
        )}

     

       
201
       
 
       
        <button>after</button>

     
···

       
226
       
 
       


     

       
227
       
 
       
  // tabs to last dialog

     

       
228
       
 
       
  cy.realPress(['Shift', 'Tab']);

     

       
229
       
-
       
  cy.focused().contains('Outer #2');

     

       
230
       
-
       


     

       
231
       
-
       
  // arrows bring us back to the inner dialog

     

       
232
       
-
       
  cy.realPress('ArrowUp');

     

       
233
       
-
       
  cy.focused().contains('Inner #2');

     

       
234
       
 
       


     

       
235
       
 
       
  // tab out of dialogs

     

       
236
       
 
       
  cy.realPress('Tab');

     

       
237
       
 
       
  cy.focused().contains('after');

     

       
238
       
-
       
  // we can't reenter the dialogs

     

       
239
       
-
       
  cy.realPress(['Shift', 'Tab']);

     

       
240
       
-
       
  cy.get('@input').should('have.focus');

     

       
241
       
 
       
});

     

       
242
       
 
       


     

       
243
       
 
       
it('allows dialogs in semantic order', () => {

     

···

       
160
       
 
       
  cy.get('@input')

     

       
161
       
 
       
    .should('have.focus')

     

       
162
       
 
       
    .should('have.value', 'test');

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
163
       
 
       
});

     

       
164
       
 
       


     

       
165
       
 
       
it('supports nested dialogs', () => {

     

       
166
       
+
       
  const InnerDialog = ({ ownerRef }) => {

     

       
167
       
 
       
    const ref = useRef<HTMLUListElement>(null);

     

       
168
       
+
       
    useDialogFocus(ref, { ownerRef });

     

       
169
       
 
       


     

       
170
       
 
       
    return (

     

       
171
       
 
       
      <ul ref={ref} role="dialog">

     
···

       
190
       
 
       
          <ul ref={ref} role="dialog">

     

       
191
       
 
       
            <li tabIndex={0}>Outer #1</li>

     

       
192
       
 
       
            <li tabIndex={0} onFocus={() => setNested(true)}>Outer #2</li>

     

       
193
       
+
       
            {nested && <InnerDialog ownerRef={ref} />}

     

       
194
       
 
       
          </ul>

     

       
195
       
 
       
        )}

     

       
196
       
 
       
        <button>after</button>

     
···

       
221
       
 
       


     

       
222
       
 
       
  // tabs to last dialog

     

       
223
       
 
       
  cy.realPress(['Shift', 'Tab']);

     

       
224
       
+
       
  cy.get('@input').should('have.focus');

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
225
       
 
       


     

       
226
       
 
       
  // tab out of dialogs

     

       
227
       
 
       
  cy.realPress('Tab');

     

       
228
       
 
       
  cy.focused().contains('after');

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
229
       
 
       
});

     

       
230
       
 
       


     

       
231
       
 
       
it('allows dialogs in semantic order', () => {

     

···

       
1
       
-
       
import React, { ReactNode, useState, useLayoutEffect, useRef } from 'react';

     

       
2
       
 
       
import { mount } from '@cypress/react';

     

       
3
       
 
       


     

       
4
       
 
       
import { makePriorityHook } from '../usePriority';

     
···

       
9
       
 
       
  { id, children = null }:

     

       
10
       
 
       
  { id: string, children?: ReactNode }

     

       
11
       
 
       
) => {

     

       
0
       
 
       

     

       
12
       
 
       
  const ref = useRef<HTMLDivElement>(null);

     

       
13
       
 
       
  const hasPriority = usePriority(ref);

     

       
14
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
15
       
 
       
  useLayoutEffect(() => {

     

       
16
       
-
       
    if (hasPriority && ref.current) {

     

       
17
       
 
       
      ref.current!.focus();

     

       
18
       
 
       
    }

     

       
19
       
-
       
  }, [hasPriority, ref]);

     

       
20
       
 
       


     

       
21
       
 
       
  return (

     

       
22
       
 
       
    <div tabIndex={-1} ref={ref} id={id}>

     

···

       
1
       
+
       
import React, { ReactNode, useState, useReducer, useLayoutEffect, useRef } from 'react';

     

       
2
       
 
       
import { mount } from '@cypress/react';

     

       
3
       
 
       


     

       
4
       
 
       
import { makePriorityHook } from '../usePriority';

     
···

       
9
       
 
       
  { id, children = null }:

     

       
10
       
 
       
  { id: string, children?: ReactNode }

     

       
11
       
 
       
) => {

     

       
12
       
+
       
  const forceUpdate = useReducer(() => [], [])[1]

     

       
13
       
 
       
  const ref = useRef<HTMLDivElement>(null);

     

       
14
       
 
       
  const hasPriority = usePriority(ref);

     

       
15
       
 
       


     

       
16
       
+
       
  if (!(hasPriority as any).__marked) {

     

       
17
       
+
       
    (hasPriority as any).__marked = true;

     

       
18
       
+
       
    let current = hasPriority.current

     

       
19
       
+
       
    Object.defineProperty(hasPriority, 'current', {

     

       
20
       
+
       
      get() {

     

       
21
       
+
       
        return current;

     

       
22
       
+
       
      },

     

       
23
       
+
       
      set(value) {

     

       
24
       
+
       
        current = value;

     

       
25
       
+
       
        forceUpdate();

     

       
26
       
+
       
      },

     

       
27
       
+
       
    })

     

       
28
       
+
       
  }

     

       
29
       
+
       


     

       
30
       
 
       
  useLayoutEffect(() => {

     

       
31
       
+
       
    if (hasPriority.current && ref.current) {

     

       
32
       
 
       
      ref.current!.focus();

     

       
33
       
 
       
    }

     

       
34
       
+
       
  }, [hasPriority.current, ref]);

     

       
35
       
 
       


     

       
36
       
 
       
  return (

     

       
37
       
 
       
    <div tabIndex={-1} ref={ref} id={id}>

     

···

       
38
       
 
       
      if (!element || event.defaultPrevented || willReceiveFocus) return;

     

       
39
       
 
       


     

       
40
       
 
       
      const target = event.target as HTMLElement | null;

     

       
41
       
-
       
      if (target && getFocusTargets(element).indexOf(target) > -1) {

     

       
42
       
 
       
        selection = null;

     

       
43
       
 
       
        willReceiveFocus = true;

     

       
44
       
 
       
      }

     
···

       
52
       
 
       


     

       
53
       
 
       
      if (

     

       
54
       
 
       
        willReceiveFocus ||

     

       
55
       
-
       
        (hasPriority && owner && contains(event.target, owner))

     

       
56
       
 
       
      ) {

     

       
57
       
 
       
        if (!contains(ref.current, event.relatedTarget))

     

       
58
       
 
       
          selection = snapshotSelection(owner);

     
···

       
62
       
 
       


     

       
63
       
 
       
      // Check whether focus is about to move into the container and prevent it

     

       
64
       
 
       
      if (

     

       
65
       
-
       
        (hasPriority || !contains(ref.current, event.relatedTarget)) &&

     

       
66
       
 
       
        contains(ref.current, event.target)

     

       
67
       
 
       
      ) {

     

       
68
       
 
       
        event.preventDefault();

     

       
69
       
-
       
        focusMovesForward = true;

     

       
70
       
 
       
        // Get the next focus target of the container

     

       
71
       
 
       
        focus(getNextFocusTarget(element, !focusMovesForward));

     

       
0
       
 
       

     

       
72
       
 
       
      }

     

       
73
       
 
       
    }

     

       
74
       
 
       


     
···

       
78
       
 
       
      // Mark whether focus is moving forward for the `onFocus` handler

     

       
79
       
 
       
      if (event.code === 'Tab') {

     

       
80
       
 
       
        focusMovesForward = !event.shiftKey;

     

       
81
       
-
       
      } else if (!hasPriority) {

     

       
82
       
 
       
        return;

     

       
83
       
 
       
      }

     

       
84
       
 
       


     
···

       
183
       
 
       
      document.body.removeEventListener('focusin', onFocus);

     

       
184
       
 
       
      document.removeEventListener('keydown', onKey);

     

       
185
       
 
       
    };

     

       
186
       
-
       
  }, [ref.current, disabled, hasPriority]);

     

       
187
       
 
       
}

     

···

       
38
       
 
       
      if (!element || event.defaultPrevented || willReceiveFocus) return;

     

       
39
       
 
       


     

       
40
       
 
       
      const target = event.target as HTMLElement | null;

     

       
41
       
+
       
      if (target && contains(element, target)) {

     

       
42
       
 
       
        selection = null;

     

       
43
       
 
       
        willReceiveFocus = true;

     

       
44
       
 
       
      }

     
···

       
52
       
 
       


     

       
53
       
 
       
      if (

     

       
54
       
 
       
        willReceiveFocus ||

     

       
55
       
+
       
        (hasPriority.current && owner && contains(event.target, owner))

     

       
56
       
 
       
      ) {

     

       
57
       
 
       
        if (!contains(ref.current, event.relatedTarget))

     

       
58
       
 
       
          selection = snapshotSelection(owner);

     
···

       
62
       
 
       


     

       
63
       
 
       
      // Check whether focus is about to move into the container and prevent it

     

       
64
       
 
       
      if (

     

       
65
       
+
       
        (hasPriority.current || !contains(ref.current, event.relatedTarget)) &&

     

       
66
       
 
       
        contains(ref.current, event.target)

     

       
67
       
 
       
      ) {

     

       
68
       
 
       
        event.preventDefault();

     

       
0
       
 
       

     

       
69
       
 
       
        // Get the next focus target of the container

     

       
70
       
 
       
        focus(getNextFocusTarget(element, !focusMovesForward));

     

       
71
       
+
       
        focusMovesForward = true;

     

       
72
       
 
       
      }

     

       
73
       
 
       
    }

     

       
74
       
 
       


     
···

       
78
       
 
       
      // Mark whether focus is moving forward for the `onFocus` handler

     

       
79
       
 
       
      if (event.code === 'Tab') {

     

       
80
       
 
       
        focusMovesForward = !event.shiftKey;

     

       
81
       
+
       
      } else if (!hasPriority.current) {

     

       
82
       
 
       
        return;

     

       
83
       
 
       
      }

     

       
84
       
 
       


     
···

       
183
       
 
       
      document.body.removeEventListener('focusin', onFocus);

     

       
184
       
 
       
      document.removeEventListener('keydown', onKey);

     

       
185
       
 
       
    };

     

       
186
       
+
       
  }, [ref.current, disabled]);

     

       
187
       
 
       
}

     

···

       
29
       
 
       
    const { current: element } = ref;

     

       
30
       
 
       
    if (!element || disabled) return;

     

       
31
       
 
       


     

       
32
       
-
       
    function onFocusOut(event: FocusEvent) {

     

       
33
       
-
       
      if (event.defaultPrevented) return;

     

       
34
       
 
       


     

       
0
       
 
       

     

       
35
       
 
       
      const { target, relatedTarget } = event;

     

       
36
       
-
       
      if (contains(element, target) && !contains(element, relatedTarget)) {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
37
       
 
       
        onDismissRef.current();

     

       
38
       
 
       
      }

     

       
39
       
 
       
    }

     

       
40
       
 
       


     

       
41
       
 
       
    function onKey(event: KeyboardEvent) {

     

       
42
       
-
       
      if (!event.isComposing && event.code === 'Escape') {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
43
       
 
       
        // The current dialog can be dismissed by pressing escape if it either has focus

     

       
44
       
 
       
        // or it has priority

     

       
45
       
-
       
        const active = document.activeElement;

     

       
46
       
-
       
        if (hasPriority || (active && contains(element, active))) {

     

       
47
       
-
       
          event.preventDefault();

     

       
48
       
-
       
          onDismissRef.current();

     

       
49
       
-
       
        }

     

       
50
       
 
       
      }

     

       
51
       
 
       
    }

     

       
52
       
 
       


     

       
53
       
 
       
    function onClick(event: MouseEvent | TouchEvent) {

     

       
54
       
 
       
      const { target } = event;

     

       
55
       
-
       
      if (contains(element, target) || event.defaultPrevented) {

     

       
0
       
 
       

     

       
56
       
 
       
        return;

     

       
57
       
-
       
      }

     

       
58
       
-
       


     

       
59
       
-
       
      // The current dialog can be dismissed by pressing outside of it if it either has

     

       
60
       
-
       
      // focus or it has priority

     

       
61
       
-
       
      const active = document.activeElement;

     

       
62
       
-
       
      if (hasPriority || (active && contains(element, active))) {

     

       
63
       
 
       
        event.preventDefault();

     

       
64
       
 
       
        onDismissRef.current();

     

       
65
       
 
       
      }

     

       
66
       
 
       
    }

     

       
67
       
 
       


     

       
68
       
-
       
    if (focusLoss) document.body.addEventListener('focusout', onFocusOut);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
69
       
 
       


     

       
70
       
 
       
    document.addEventListener('mousedown', onClick);

     

       
71
       
 
       
    document.addEventListener('touchstart', onClick);

     

       
72
       
 
       
    document.addEventListener('keydown', onKey);

     

       
73
       
 
       


     

       
74
       
 
       
    return () => {

     

       
75
       
-
       
      if (focusLoss) document.body.removeEventListener('focusout', onFocusOut);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
76
       
 
       


     

       
77
       
 
       
      document.removeEventListener('mousedown', onClick);

     

       
78
       
 
       
      document.removeEventListener('touchstart', onClick);

     

···

       
29
       
 
       
    const { current: element } = ref;

     

       
30
       
 
       
    if (!element || disabled) return;

     

       
31
       
 
       


     

       
32
       
+
       
    let willLoseFocus = false;

     

       
0
       
 
       

     

       
33
       
 
       


     

       
34
       
+
       
    function onFocusOut(event: FocusEvent) {

     

       
35
       
 
       
      const { target, relatedTarget } = event;

     

       
36
       
+
       
      if (

     

       
37
       
+
       
        !event.defaultPrevented &&

     

       
38
       
+
       
        (relatedTarget || willLoseFocus) &&

     

       
39
       
+
       
        contains(element, target) &&

     

       
40
       
+
       
        !contains(element, relatedTarget)

     

       
41
       
+
       
      ) {

     

       
42
       
+
       
        willLoseFocus = false;

     

       
43
       
+
       
        onDismissRef.current();

     

       
44
       
+
       
      }

     

       
45
       
+
       
    }

     

       
46
       
+
       


     

       
47
       
+
       
    function onFocusIn(event: FocusEvent) {

     

       
48
       
+
       
      const { target } = event;

     

       
49
       
+
       
      if (!event.defaultPrevented && !contains(element, target)) {

     

       
50
       
 
       
        onDismissRef.current();

     

       
51
       
 
       
      }

     

       
52
       
 
       
    }

     

       
53
       
 
       


     

       
54
       
 
       
    function onKey(event: KeyboardEvent) {

     

       
55
       
+
       
      if (event.isComposing) {

     

       
56
       
+
       
        return;

     

       
57
       
+
       
      }

     

       
58
       
+
       


     

       
59
       
+
       
      const active = document.activeElement;

     

       
60
       
+
       
      if (

     

       
61
       
+
       
        event.code === 'Escape' &&

     

       
62
       
+
       
        (hasPriority.current || (active && contains(element, active)))

     

       
63
       
+
       
      ) {

     

       
64
       
 
       
        // The current dialog can be dismissed by pressing escape if it either has focus

     

       
65
       
 
       
        // or it has priority

     

       
66
       
+
       
        event.preventDefault();

     

       
67
       
+
       
        onDismissRef.current();

     

       
68
       
+
       
      } else if (event.code === 'Tab') {

     

       
69
       
+
       
        willLoseFocus = true;

     

       
0
       
 
       

     

       
70
       
 
       
      }

     

       
71
       
 
       
    }

     

       
72
       
 
       


     

       
73
       
 
       
    function onClick(event: MouseEvent | TouchEvent) {

     

       
74
       
 
       
      const { target } = event;

     

       
75
       
+
       
      const active = document.activeElement;

     

       
76
       
+
       
      if (event.defaultPrevented) {

     

       
77
       
 
       
        return;

     

       
78
       
+
       
      } else if (contains(element, target)) {

     

       
79
       
+
       
        willLoseFocus = false;

     

       
80
       
+
       
        return;

     

       
81
       
+
       
      } else if (hasPriority || (active && contains(element, active))) {

     

       
82
       
+
       
        // The current dialog can be dismissed by pressing outside of it if it either has

     

       
83
       
+
       
        // focus or it has priority

     

       
84
       
 
       
        event.preventDefault();

     

       
85
       
 
       
        onDismissRef.current();

     

       
86
       
 
       
      }

     

       
87
       
 
       
    }

     

       
88
       
 
       


     

       
89
       
+
       
    if (focusLoss) {

     

       
90
       
+
       
      document.body.addEventListener('focusout', onFocusOut);

     

       
91
       
+
       
      document.body.addEventListener('focusin', onFocusIn);

     

       
92
       
+
       
    }

     

       
93
       
 
       


     

       
94
       
 
       
    document.addEventListener('mousedown', onClick);

     

       
95
       
 
       
    document.addEventListener('touchstart', onClick);

     

       
96
       
 
       
    document.addEventListener('keydown', onKey);

     

       
97
       
 
       


     

       
98
       
 
       
    return () => {

     

       
99
       
+
       
      if (focusLoss) {

     

       
100
       
+
       
        document.body.removeEventListener('focusout', onFocusOut);

     

       
101
       
+
       
        document.body.removeEventListener('focusin', onFocusIn);

     

       
102
       
+
       
      }

     

       
103
       
 
       


     

       
104
       
 
       
      document.removeEventListener('mousedown', onClick);

     

       
105
       
 
       
      document.removeEventListener('touchstart', onClick);

     

···

       
30
       
 
       


     

       
31
       
 
       
  useLayoutEffect(() => {

     

       
32
       
 
       
    const { current: element } = ref;

     

       
33
       
-
       
    if (!element || !hasPriority || disabled) return;

     

       
34
       
 
       


     

       
35
       
 
       
    let selection: RestoreSelection | null = null;

     

       
36
       
 
       
    if (!document.activeElement || !contains(element, document.activeElement)) {

     
···

       
40
       
 
       
    }

     

       
41
       
 
       


     

       
42
       
 
       
    function onBlur(event: FocusEvent) {

     

       
43
       
-
       
      if (!element || event.defaultPrevented) return;

     

       
44
       
 
       


     

       
45
       
 
       
      if (

     

       
46
       
 
       
        contains(element, event.target) &&

     
···

       
52
       
 
       
    }

     

       
53
       
 
       


     

       
54
       
 
       
    function onKeyDown(event: KeyboardEvent) {

     

       
55
       
-
       
      if (!element || event.defaultPrevented) return;

     

       
56
       
 
       


     

       
57
       
 
       
      if (event.code === 'Tab') {

     

       
58
       
 
       
        const activeElement = document.activeElement as HTMLElement;

     

···

       
30
       
 
       


     

       
31
       
 
       
  useLayoutEffect(() => {

     

       
32
       
 
       
    const { current: element } = ref;

     

       
33
       
+
       
    if (!element || disabled) return;

     

       
34
       
 
       


     

       
35
       
 
       
    let selection: RestoreSelection | null = null;

     

       
36
       
 
       
    if (!document.activeElement || !contains(element, document.activeElement)) {

     
···

       
40
       
 
       
    }

     

       
41
       
 
       


     

       
42
       
 
       
    function onBlur(event: FocusEvent) {

     

       
43
       
+
       
      if (!hasPriority.current || !element || event.defaultPrevented) return;

     

       
44
       
 
       


     

       
45
       
 
       
      if (

     

       
46
       
 
       
        contains(element, event.target) &&

     
···

       
52
       
 
       
    }

     

       
53
       
 
       


     

       
54
       
 
       
    function onKeyDown(event: KeyboardEvent) {

     

       
55
       
+
       
      if (!hasPriority.current || !element || event.defaultPrevented) return;

     

       
56
       
 
       


     

       
57
       
 
       
      if (event.code === 'Tab') {

     

       
58
       
 
       
        const activeElement = document.activeElement as HTMLElement;

     

···

       
22
       
 
       
  return function usePriority<T extends HTMLElement>(

     

       
23
       
 
       
    ref: Ref<T>,

     

       
24
       
 
       
    disabled?: boolean

     

       
25
       
-
       
  ): boolean {

     

       
26
       
 
       
    const isDisabled = !!disabled;

     

       
27
       
-
       
    const [hasPriority, setHasPriority] = useState(() => {

     

       
28
       
-
       
      if (!ref.current) return false;

     

       
29
       
-
       
      const tempStack = priorityStack.concat(ref.current).sort(sortByHierarchy);

     

       
30
       
-
       
      return tempStack[0] === ref.current;

     

       
31
       
-
       
    });

     

       
0
       
 
       

     

       
32
       
 
       


     

       
33
       
 
       
    useLayoutEffect(() => {

     

       
34
       
 
       
      const { current: element } = ref;

     

       
35
       
 
       
      if (!element || isDisabled) return;

     

       
36
       
 
       


     

       
37
       
 
       
      function onChange() {

     

       
38
       
-
       
        setHasPriority(() => priorityStack[0] === ref.current);

     

       
39
       
 
       
      }

     

       
40
       
 
       


     

       
41
       
 
       
      priorityStack.push(element);

     

···

       
22
       
 
       
  return function usePriority<T extends HTMLElement>(

     

       
23
       
 
       
    ref: Ref<T>,

     

       
24
       
 
       
    disabled?: boolean

     

       
25
       
+
       
  ): { current: boolean } {

     

       
26
       
 
       
    const isDisabled = !!disabled;

     

       
27
       
+
       
    const [hasPriority] = useState(() => ({

     

       
28
       
+
       
      current:

     

       
29
       
+
       
        !!ref.current &&

     

       
30
       
+
       
        priorityStack.concat(ref.current).sort(sortByHierarchy)[0] ===

     

       
31
       
+
       
          ref.current,

     

       
32
       
+
       
    }));

     

       
33
       
 
       


     

       
34
       
 
       
    useLayoutEffect(() => {

     

       
35
       
 
       
      const { current: element } = ref;

     

       
36
       
 
       
      if (!element || isDisabled) return;

     

       
37
       
 
       


     

       
38
       
 
       
      function onChange() {

     

       
39
       
+
       
        hasPriority.current = priorityStack[0] === ref.current;

     

       
40
       
 
       
      }

     

       
41
       
 
       


     

       
42
       
 
       
      priorityStack.push(element);