bug: V5 Dialog does not put focus on first focusable element

[mathieulesniak]

What version of daisyUI are you using?

v5 beta 6

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://codepen.io/mlesniak/pen/MYgxPxr

Describe your issue

Context: When opening a dialog html element, focus is automatically set to first focusable element in the dialog. In DaisyUI v5 beta 6, the first focusable element does not take focus once the modal is opened (JS way) In addition, trying to focus an input with JS does not seems to work either.

In v4, focus was ok when opening a modal : https://codepen.io/mlesniak/pen/ogvVaOR (whereas text field does not show blinking caret)

Steps to reproduce:

• open the according codepen (v4 or v5)
• click on button open modal in daisy UI
• try to type something. Typed text should appear in modal input

[github-actions[bot]]

Thank you @mathieulesniak for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

fixed in 5.0.0-beta.7

[ymmt07039]

It seems that this issue has reoccurred in 5.0.0-beta.9. It was working fine in beta.8.

[Conni2461]

Also experiencing this issue in 5.0.0.

The codepen for reproducing also still seems valid, you just have to replace the version, none the less should i open a new issue?

[delasource]

This effectively killed my cmd+k modal today...

[delasource]

This can be easily seen on the demo of https://nexus.daisyui.com/dashboards/ecommerce - just click the search button on the top (it should automatically set focus to the input)

[saadeghi]

I'm working on it

[delasource]

seems to be fixed! 👍 thank you

[neopointer]

@saadeghi I also have the same issue. I've tried in the latest version and it doesn't work.

Even calling element.focus() on the input field inside of the modal does not put the focus on the element.

Is there something especial that needs to be done?

[saadeghi]

@neopointer

Is there something especial that needs to be done?

No.
This is fixed already. If it's not working for you, please share a minimal reproduction link so I can help.

[neopointer]

@saadeghi here's the reproducer with the latest version: https://codepen.io/neopointer/pen/OPPjvGq

Here's another version without daisy ui: https://codepen.io/neopointer/pen/XJJaqrM

I don't really know if it's a bug, but maybe I'm missing something.

[callumbirks]

I'm experiencing the same "issue", not sure if I may be missing some understanding. I have a modal with an input with ID "project-name", it does not focus with autoFocus property (it did before I converted it to DaisyUI modal). I created a function to help ensure focus:

  const handleButtonClick = () => {
    modalRef.current?.showModal();
    const input = window.document.getElementById(
      "project-name"
    ) as HTMLInputElement;
    input.focus();
  };

Which doesn't focus the input either. But this does (after half a second):

  const handleButtonClick = () => {
    modalRef.current?.showModal();
    const input = window.document.getElementById(
      "project-name"
    ) as HTMLInputElement;
    window.setTimeout(() => {
      input.focus();
    }, 500);
  };

~~I have a feeling this is related to the modal's animation.~~ EDIT: Actually now I'm not so sure. Even doing setTimeout to 10ms works, so it might just be because the element is not visible. Either way would be nice if autofocus worked so I didn't have to do this weird workaround

[saadeghi]

This issue is back again 🙃
Apparently fixing https://github.com/saadeghi/daisyui/issues/3787 causes this issue.

🤔 Challenge: If visibility has a transition, the dialog inputs won't get focus, which is understandable: Transition is 0.3s but focus fires at 0s but it can't focus an invisible element.
👍 Solution, visibility must not have animation.
However there's a bug in Chrome:
👎 If visibility has no duration, it ignores translate transition.

In below video, see how disabling transition of visibility, breaks the transition of translate:

https://github.com/user-attachments/assets/b2a7f5c7-abef-48a2-a7af-0d30822db27d

Reproduction: https://play.tailwindcss.com/FZbfJGTluz?file=css

Let me know if you could find a solution ☹️

[bdmendes]

I can also reproduce this on my side as of v5.0.35. I have a Pagefind UI inside a modal that is no longer autofocused after upgrading from Daisy UI 4.

[fravan]

Hello everyone,

I have the same issue, and for what is worth, here is my css to fix it:

@layer utilities {
    .modal {
        transition:
            translate 0.3s ease-out,
            background-color 0.3s ease-out,
            opacity 0.1s ease-out;
        @starting-style {
            &.modal-open,
            &[open],
            &:target {
                visibility: visible;
            }
        }
    }
}

I simply removed the starting-style that had the visibility: hidden, and removed it from the transition.

It does seem to work as intended, but I haven't tested it extensively. It works for my usecase ! 🤞

Note: Only removing the starting-style visibility is not enough, I had to remove it from the transition as well.

[willianba]

I just want to leave my +1 here. After updating from DaisyUI 4 the autofocus doesn't work anymore. The CSS workaround @fravan posted also worked for me. I'll use that in the meantime.

[delasource]

@saadeghi would be great if it would be permanently fixed in the library :)

[saadeghi]

@delasource Yes but: https://github.com/saadeghi/daisyui/issues/3440#issuecomment-2847662168

there's a bug in Chrome: If visibility has no duration, it ignores translate transition.

If anyone finds a workaround, let me know 🤷‍♂️

[delasource]

The workaround is:

.modal {
    visibility: visible !important;
}

(use at own risk :) )

[DanieII]

Removing visibility works but it makes the modal close without a transition

[pdanpdan]

@saadeghi I found a solution: https://play.tailwindcss.com/oT5V7KnQ0o?file=css Seems to work smooth even for .modal-end and .modal-bottom

Tested to work as expected on:

• chrome desktop linux
• firefox desktop linux
• chrome android
• safari ios (with the usual caveat that safari ios is trash and bottom modal stays under the keyboard)

Credits: https://chriskirknielsen.com/blog/prevent-jank-on-focused-elements-in-an-overflow-container/

.modal {
  overflow: clip;
  /*
  instead of
  overflow-x: hidden;
  overflow-y: hidden;
  */
}

.modal-box {
  /* add this to allow focus inside when showing */
  visibility: visible;
}

It also fixes the problem with .collapse in modal (#3835)

Updated example with collapse in modals: https://play.tailwindcss.com/nOguNii64h

[saadeghi]

@pdanpdan Thank you 🙏
Fixed in 5.1.30

[pdanpdan]

#3835 should also be closed

[pdanpdan]

@saadeghi I saw your comment https://github.com/saadeghi/daisyui/issues/3440#issuecomment-2847662168

I think now you can remove the visibility animation because the translate animation will work even if focused. (and then you can remove the newly added visible from modal-box)