3

i need to get this component opened by default without loosing the open closed default behavior.

What is interesting is that they to this in the example of the documentation, but when you copy paste the code under the "code" tab, it is closed by default.

https://headlessui.com/react/menu

Thanks

I managed to get the component opened by default by adding static as stated in the doc + adding show={true} on the transition component but with this solution, i cant close it.

I was expecting some prop like default={'open'} but i can't find it in the documentation

alexandre-mace
  • 51
  • 2

2 Answers2

0

One option I found is to simulate click on a Menu Button following this answer

<Menu.Button ref={(e) => {e.click()}} onClick={() => console.log("Clicked")}>
    MyButton
</Menu.Button>

Looking for a better option though..

gman
  • 116
  • 1
  • 4
0

As @gman mentioned before, you should trigger click event by yourself but with more control of button template (because now all events and attributes will be on your wrapper):

(Note: I'm not a react developer but I tried it in vue and worked)

  • So, you should make your template to have no wrapper (your custom wrapper) with as={React.Fragment}

Note: You can make it work without as={React.Fragment} too but as I said before it is for more control over your button

<Menu.Button as={React.Fragment} ref="el">
   <button>More</button>
</Menu.Button>
  • Then in mount hook of your component you can trigger click event and that will open menu
// I don't know react hooks so it is sudo code
onMounted(() => {
   el.click() // el will be your 'button' tag you defined
})

I hope it helps.

MMDM
  • 465
  • 3
  • 11