Regression: No transitions on open dialog [v1.6.5]

[biesbjerg]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.6.5

What browser are you using?

Chrome

Reproduction URL

https://headlessui.dev/vue/dialog

Describe your issue

No transitions take place when dialog initially appears or after closing/opening it again. Transition on close seems to work though. It used to work in v1.6.4.

[timrspratt]

This is appears to be whenever there is a focussable (input/button) element within the dialog panel. The lack of transition used to occur on initial load of the component but now it appears to never transition when showing the panel.

[mashpie]

Seems to be working in Safari, but not in Firefox or Chrome anymore... if that helps.

[albingroen]

I'm seeing this too. Only when I have an input with autofocus turned on though.

[albingroen]

A workaround, for now, is to manually focus the input with no delay. Seems to work.

  useEffect(() => {
    setTimeout(() => {
      if (inputRef.current) {
        inputRef.current.focus();
      }
    }, 0);
  }, []);

[ahoiroman]

Must have been introduced in 1.6.5. Tested it in 1.6.4 with no problems. I see this issue on modals and slideovers, if the first autofocussed item is an input. If it's a button the problem does not appear.

Problem appears on safari in my case, tool

[zipme]

Yeah, also happens in Safari. https://headlessui.dev/vue/popover

The react version works fine though.

[oberocks]

Can confirm that the issue is in 1.6.5. Modals and slide-overs both skip their entrance transition classes and insta-render.

Safari did not have the issue in my use cases. Chrome and Firefox had it - in a Vite/Vue setup, a Vite/Vue/Ts setup, and a Nuxt 3 setup.

Downgrading to 1.6.4 solved the issue across all three implementations.

And for what it's worth in my use cases, there were no inputs or anything. I had a slide-over and a dialog from the headlessUI site both balking on the animate in on the two browsers. No inputs involved. Just an icon close button or the default buttons from the headless examps.

[mvanroon]

I'm experiencing similar issues on react with v1.50, v1.6.4 and v1.6.5.

Reproduction URL: https://codesandbox.io/embed/tailwind-css-and-react-forked-wsiu2h

[LucasNovaes2016]

I'm experiencing the same problem. I had the v1.4.1 and decided to update to v.1.6.5 today and then I had this issue with the Transition component. I had to downgrade to v.1.50 in order to see this problem disappear. I'm going to skip v1.6+ for now.

[emargareten]

same here

[jblachly]

I have this same issue but with a variation that may provide clues as to the cause. Crucially, for me it (the "insta render/insta open bug) occurs ONLY IN SPECIFIC CIRCUMSTANCES in 1.6.4, but always in 1.6.5. However, because I was able to reproduce the insta-open behavior under a specific circumstance in 1.6.4, I thought this could be useful to report in terms of tracking down the cause.

In the attached video, note that the slide-open transition appears properly when triggering (via a simple update of a ref reactive boolean which is tied to a prop of the slideover panel) from:

• A regular button (button tag; not SFC)
• A regular button as part of a button group (as a separate SFC)

However, note that when it is triggered from an open menu (Button group, with dropdown: https://tailwindui.com/components/application-ui/elements/button-groups), it instantly renders without transition.

2022-07-01.16-02-17.mp4

Given this, I am wondering if there is a (Headless UI internal) interaction between whatever's tracking the "open" state for both the Button group with dropdown, and the slideover?

On the other hand, I was not able to reproduce the issue with a minimal example, even using 1.6.4:

https://stackblitz.com/edit/github-gdgttl-kvccnl?file=src/App.vue

My local project (as pictured in video; with hybrid behavior) versions:
Vue 3.2.25
@headlessui/vue 1.6.4
Slideover and Button with dropdown components directly from TailwindUI with modification to pass props in, emit events out, etc.

[JaavierR]

I'm experiencing the same issue with @headlessui/vue 1.6.5, the initial animations won't work. For now downgrading to the previous version (1.6.4) fix the problem.

[lotestudio]

Same: @headlessui/vue 1.6.5.
If there is no focusable element works fine. The demo on the site is with the same issue.

[vafanassieff]

Confirm, too only enter position are not working with @headlessui/vue@1.6.5

The example are not working either when choosing Vue (it works when you chose react)

[sitefinitysteve]

I've been thinking I've been going crazy (maybe I missed something) the last week, and just gave up... until I tried a new popover and still no transition. Both glad and frustrated it's not just me. Gonna try the downgrade.

[mashpie]

Seems to be related to focus-trap refactories since v1.5.0 - sadly Combobox "tab+focus" was broken in 1.5.0. So I had to find a workaround for any 1.6.x version, which is to pin to version 1.6.4 + handling focus() in dialogs by app logic.

This is all vue... btw.

Setup modals, panels with new DialogPanel (https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Fvue%40v1.6.0)

now transitions work, but focus-trap is messed up (tab cycles through all other focusable elements first until stepping into modal, from now on stays in the trap).

A fix is to force focus() onModalOpen by yourself, so let focus step into the trap.

Add event handler to TransitionRoot, ie.:

<TransitionRoot as="template" :show="isOpen" @after-enter="onEntered">

And with (template):

<button ref="CancelButtonRef" type="button">
  Cancel
</button>

plus (script setup):

const okButtonRef = ref(null)
const onEntered = () => okButtonRef.value.focus()

UX works out as expected.

---

issues with 1.6.5 & 1.6.6

• no fix for initial transition issue
• no fix for focus (1.6.6 gives some back but not when combined with combobox)
• Menue with a or button tags will stay "opened" after click when opening a dialog (also related to focus-trap handling)

---

I'll try to setup stackblitz examples for both issue (1.6.6) and workaround (1.6.4). I'd liked to investigate and contribute, but TS + React are not my best friends...

[mashpie]

follow up:

1.6.6 with Transition- (& focus-) issue
https://stackblitz.com/github/mashpie/headlessui-transition-focus-issue/tree/1.6.6?file=src%2Fcomponents%2FDialog.vue

1.6.4 working Transition but focus issue (with workaround)
https://stackblitz.com/github/mashpie/headlessui-transition-focus-issue/tree/1.6.4?file=src%2Fcomponents%2FDialog.vue

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed by #1664, and is available in the latest release 1.6.7.

You can already try it using npm install @headlessui/vue@latest.

[mashpie]

Thank you so much @RobinMalfait!

I can confirm my use cases are working fine now with 1.6.7
(https://github.com/mashpie/headlessui-transition-focus-issue/tree/1.6.7)

Keep up the good work :)

[mvanroon]

Looking forward to the react release!

[oberocks]

@RobinMalfait Awesome and thank you very much! Nice work on the tests, too! :)

[LucasNovaes2016]

@RobinMalfait Thanks! will this be fixed on the React version?

[radiylon]

@LucasNovaes2016 Looks like the React version is being worked on right now #1118

[eugenet8k]

It seems absolutely the same issue exists in @headlessui/react, latest v1.7.3. Did anyone look at that by chance?

[RobinMalfait]

@eugenet8k can you create a reproduction of this and share it?

[eugenet8k]

@RobinMalfait won't do an example, because the issue seems to be well described here #390

It was about having a button with autoFocus prop in React, the initial transition wouldn't work then. So it has a workaround.

Thank you for a quick response though.

[RobinMalfait]

Hmm, when I use the CodeSandbox from #390 and bump to the latest version all the enter transitions seem to work just fine: https://codesandbox.io/s/headlessui-dialog-forked-beenfw?file=/pages/index.js 🤔