Modal - onOpen or afterOpen hook?

[cstrat]

I've got a <Modal> which appears and has <Tabs> inside it.
It is a form wizard stepping user through a few pages of stuff.

Right now when the modal appears, the first tab (the tab link itself) is given focus but I'd rather pass focus to the first field element which is fine as default behaviour.
I am not able to intercept and provide focus using refs & useEffect or useLayoutEffect.

See reproduction here:
https://codesandbox.io/s/mantine-modal-focus-spnxz?file=/src/App.js

Perhaps if there were a onOpen or afterOpen hook which behaved like a useEffect (but after whatever modal logic runs) we could pass focus during that hook?

This could be too prescriptive - but what if we passed a ref for what we wanted focus to be on?

[cstrat]

This is what I see when I click that button:

Side comment, it would be nice if we could turn off the focus highlight. Although this seems to only show in Safari.

[rtivital]

This is a side effect of focus trap. How it works:

• Modal is opened (mounted to the dom)
• useEffect/useLayoutEffect/autoFocus on components is called
• useFocusTrap is triggered and focus is shifted on first interactive element

To solve that – put focus managing logic into immediate timeout, this way the order of execution is changed and input is focused
https://codesandbox.io/s/mantine-modal-focus-forked-9resg?file=/src/App.js

[cstrat]

I can do that, but this seems like a hack - I had to adjust the timeout to 10ms before it worked correctly on my PC.

Maybe you can comment on how complex this might be.
Why can't we pass in the ref for where we want focus to be? This should be optional, fall back to the current method.

This would let me overcome this issue, but also address general usability of Modals where the focus is typically always on the close button as that's the first focusable element.

[rtivital]

It should not be complex at all, it's just not implemented in focus trap. Passing ref is not the best idea as we already have autoFocus prop on all inputs and buttons, I'll add support for this in next minor release (most likely mid-end June).

[rtivital]

Meanwhile you can use timeouts – although it's a hack it should not impact users as modal has 200ms animation and setting timeout to 70-100ms will solve the issue on all devices.

[rtivital]

I've released 1.3.0-alpha-0 with new autofocus feature for use-focus-trap hook. Here is my findings and solution:

• react does not add autofocus attribute to elements (we cannot target that with use-focus-trap)
• to make api more simple I've added [data-focusable] selector handling to specify initial focus element

import React, { useState } from "react";
import { Button, Input, Tabs, Tab, Modal } from "@mantine/core";

export default function App() {
  const [isOpen, setOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>
      <Modal opened={isOpen} onClose={() => setOpen(false)} hideCloseButton>
        <Tabs>
          <Tab label="First Tab">
            <Input data-autofocus placeholder="Should have focus!" />
          </Tab>
          <Tab label="Second Tab">Test</Tab>
          <Tab label="Third Tab">Test</Tab>
        </Tabs>
      </Modal>
    </div>
  );
}

[rtivital]

It's there, just tagged as next on npm – https://www.npmjs.com/package/@mantine/core/v/1.3.0-alpha.0
not sure how to install it via codesandbox

[cstrat]

Sorry you're right it is there! I must have mistyped 😄

[cstrat]

Can't seem to get it to work.
Am I supposed to do more than simply add that prop to the field I want to get initial focus?

<Tab label="Subscription Name">
  <form onSubmit={nextStep}>
    <InputWrapper
      id="name"
      label="Subscription Name"
      required
      style={{ marginBottom: 12 }}
    >
      <Input
        id="name"
        value={subData.name}
        onChange={handleChange}
        placeholder="Subscription Name"
        elementRef={tabRef[0]}
        data-autofocus
      />
    </InputWrapper>
    <InputWrapper
      id="description"
      label="Description"
      description="Short description about this subscription, or more information."
      style={{ marginBottom: 12 }}
    >
      <Input
        id="description"
        value={subData.description}
        onChange={handleChange}
      />
    </InputWrapper>
    <Button style={{ float: 'right' }} type="submit" disabled={!subData.name}>Next</Button>
    <CancelButton dirty={subData._dirty} onClick={onClose} />
  </form>
</Tab>

[rtivital]

Work fine on code sandbox – https://codesandbox.io/s/mantine-modal-focus-forked-9resg?file=/src/App.js
Not that all @mantine/hooks need to be updated also to 1.3.0.alpha-0

[cstrat]

🤦🏻‍♂️
my excuse it that its quite late here. didn't update the other packages!
works great!