···

       
59
       
 
       
it('should not allow the dialog to be tabbable', () => {

     

       
60
       
 
       
  const Dialog = () => {

     

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

     

       
62
       
-
       
    useDialogFocus(ref);

     

       
0
       
 
       

     

       
63
       
 
       
    return (

     

       
64
       
 
       
      <div>

     

       
65
       
-
       
        <input type="text" name="text" />

     

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

     

       
67
       
 
       
          <li tabIndex={0}>#1</li>

     

       
68
       
 
       
          <li tabIndex={0}>#2</li>

     
···

       
183
       
 
       
    const [visible, setVisible] = useState(false);

     

       
184
       
 
       
    const [nested, setNested] = useState(false);

     

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

     

       
0
       
 
       

     

       
186
       
 
       


     

       
187
       
-
       
    useDialogFocus(ref, { disabled: !visible });

     

       
188
       
 
       


     

       
189
       
 
       
    return (

     

       
190
       
 
       
      <main>

     

       
191
       
-
       
        <input type="text" name="text" onFocus={() => setVisible(true)} />

     

       
192
       
-
       
        {visible && (

     

       
193
       
-
       
          <ul ref={ref} role="dialog">

     

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

     

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

     

       
196
       
-
       
            {nested && <InnerDialog />}

     

       
197
       
-
       
          </ul>

     

       
198
       
-
       
        )}

     

       
199
       
-
       
        <button>after</button>

     

       
200
       
-
       
      </main>

     

       
201
       
-
       
    );

     

       
202
       
-
       
  };

     

       
203
       
-
       


     

       
204
       
-
       
  mount(<OuterDialog />);

     

       
205
       
-
       


     

       
206
       
-
       
  cy.get('input').first().as('input').focus();

     

       
207
       
-
       
  cy.focused().should('have.property.name', 'text');

     

       
208
       
-
       


     

       
209
       
-
       
  // select first dialog

     

       
210
       
-
       
  cy.realPress('ArrowDown');

     

       
211
       
-
       
  cy.focused().contains('Outer #1');

     

       
212
       
-
       
  cy.realPress('ArrowDown');

     

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

     

       
214
       
-
       


     

       
215
       
-
       
  // select second dialog

     

       
216
       
-
       
  cy.realPress('ArrowDown');

     

       
217
       
-
       
  cy.focused().contains('Inner #1');

     

       
218
       
-
       
  cy.realPress('ArrowDown');

     

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

     

       
220
       
-
       


     

       
221
       
-
       
  // remains in inner dialog

     

       
222
       
-
       
  cy.realPress('ArrowDown');

     

       
223
       
-
       
  cy.focused().contains('Inner #1');

     

       
224
       
-
       


     

       
225
       
-
       
  // tabs to last dialog

     

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

     

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

     

       
228
       
-
       


     

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

     

       
230
       
-
       
  cy.realPress('ArrowUp');

     

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

     

       
232
       
-
       


     

       
233
       
-
       
  // tab out of dialogs

     

       
234
       
-
       
  cy.realPress('Tab');

     

       
235
       
-
       
  cy.focused().contains('after');

     

       
236
       
-
       
  // we can't reenter the dialogs

     

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

     

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

     

       
239
       
-
       
});

     

       
240
       
-
       


     

       
241
       
-
       
it('supports nested dialogs', () => {

     

       
242
       
-
       
  const InnerDialog = () => {

     

       
243
       
-
       
    const ref = useRef<HTMLUListElement>(null);

     

       
244
       
-
       
    useDialogFocus(ref);

     

       
245
       
-
       


     

       
246
       
-
       
    return (

     

       
247
       
-
       
      <ul ref={ref} role="dialog">

     

       
248
       
-
       
        <li tabIndex={0}>Inner #1</li>

     

       
249
       
-
       
        <li tabIndex={0}>Inner #2</li>

     

       
250
       
-
       
      </ul>

     

       
251
       
-
       
    );

     

       
252
       
-
       
  };

     

       
253
       
-
       


     

       
254
       
-
       
  const OuterDialog = () => {

     

       
255
       
-
       
    const [visible, setVisible] = useState(false);

     

       
256
       
-
       
    const [nested, setNested] = useState(false);

     

       
257
       
-
       
    const ref = useRef<HTMLUListElement>(null);

     

       
258
       
-
       


     

       
259
       
-
       
    useDialogFocus(ref, { disabled: !visible });

     

       
260
       
-
       


     

       
261
       
-
       
    return (

     

       
262
       
-
       
      <main>

     

       
263
       
-
       
        <input type="text" name="text" onFocus={() => setVisible(true)} />

     

       
264
       
 
       
        {visible && (

     

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

     

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

     

···

       
59
       
 
       
it('should not allow the dialog to be tabbable', () => {

     

       
60
       
 
       
  const Dialog = () => {

     

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

     

       
62
       
+
       
    const ownerRef = useRef<HTMLInputElement>(null);

     

       
63
       
+
       
    useDialogFocus(ref, { ownerRef });

     

       
64
       
 
       
    return (

     

       
65
       
 
       
      <div>

     

       
66
       
+
       
        <input type="text" name="text" ref={ownerRef} />

     

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

     

       
68
       
 
       
          <li tabIndex={0}>#1</li>

     

       
69
       
 
       
          <li tabIndex={0}>#2</li>

     
···

       
184
       
 
       
    const [visible, setVisible] = useState(false);

     

       
185
       
 
       
    const [nested, setNested] = useState(false);

     

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

     

       
187
       
+
       
    const ownerRef = useRef<HTMLInputElement>(null);

     

       
188
       
 
       


     

       
189
       
+
       
    useDialogFocus(ref, { disabled: !visible, ownerRef });

     

       
190
       
 
       


     

       
191
       
 
       
    return (

     

       
192
       
 
       
      <main>

     

       
193
       
+
       
        <input type="text" name="text" onFocus={() => setVisible(true)} ref={ownerRef} />

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
194
       
 
       
        {visible && (

     

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

     

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

     

···

       
45
       
 
       
    function onFocus(event: FocusEvent) {

     

       
46
       
 
       
      if (!element || event.defaultPrevented) return;

     

       
47
       
 
       


     

       
48
       
-
       
      const active = document.activeElement as HTMLElement;

     

       
49
       
 
       
      const owner =

     

       
50
       
 
       
        (ownerRef && ownerRef.current) || (selection && selection.element);

     

       
51
       
 
       


     
···

       
53
       
 
       
        willReceiveFocus ||

     

       
54
       
 
       
        (hasPriority && owner && contains(event.target, owner))

     

       
55
       
 
       
      ) {

     

       
56
       
-
       
        if (!contains(ref.current, active))

     

       
57
       
 
       
          selection = snapshotSelection(owner);

     

       
58
       
 
       
        willReceiveFocus = false;

     

       
59
       
 
       
        return;

     

       
60
       
 
       
      }

     

       
61
       
 
       


     

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

     

       
63
       
-
       
      if (contains(ref.current, event.target)) {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
64
       
 
       
        event.preventDefault();

     

       
65
       
 
       
        // Get the next focus target of the container

     

       
66
       
 
       
        const focusTarget = getNextFocusTarget(element, !focusMovesForward);

     
···

       
157
       
 
       
        /^(?:Key|Digit)/.test(event.code)

     

       
158
       
 
       
      ) {

     

       
159
       
 
       
        // Restore selection if a key is pressed on input

     

       
160
       
-
       
        event.preventDefault();

     

       
161
       
 
       
        willReceiveFocus = false;

     

       
162
       
 
       
        restoreSelection(selection);

     

       
163
       
 
       
      }

     

···

       
45
       
 
       
    function onFocus(event: FocusEvent) {

     

       
46
       
 
       
      if (!element || event.defaultPrevented) return;

     

       
47
       
 
       


     

       
0
       
 
       

     

       
48
       
 
       
      const owner =

     

       
49
       
 
       
        (ownerRef && ownerRef.current) || (selection && selection.element);

     

       
50
       
 
       


     
···

       
52
       
 
       
        willReceiveFocus ||

     

       
53
       
 
       
        (hasPriority && owner && contains(event.target, owner))

     

       
54
       
 
       
      ) {

     

       
55
       
+
       
        if (!contains(ref.current, event.relatedTarget))

     

       
56
       
 
       
          selection = snapshotSelection(owner);

     

       
57
       
 
       
        willReceiveFocus = false;

     

       
58
       
 
       
        return;

     

       
59
       
 
       
      }

     

       
60
       
 
       


     

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

     

       
62
       
+
       
      if (

     

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

     

       
64
       
+
       
        contains(ref.current, event.target)

     

       
65
       
+
       
      ) {

     

       
66
       
 
       
        event.preventDefault();

     

       
67
       
 
       
        // Get the next focus target of the container

     

       
68
       
 
       
        const focusTarget = getNextFocusTarget(element, !focusMovesForward);

     
···

       
159
       
 
       
        /^(?:Key|Digit)/.test(event.code)

     

       
160
       
 
       
      ) {

     

       
161
       
 
       
        // Restore selection if a key is pressed on input

     

       
162
       
+
       
        event.stopPropagation();

     

       
163
       
 
       
        willReceiveFocus = false;

     

       
164
       
 
       
        restoreSelection(selection);

     

       
165
       
 
       
      }