Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using custom component as dropdown trigger

See original GitHub issue

I’ve started having a play around with this today and it’s awesome! I ran into an issue though and I’m not sure if it is because I am doing something wrong / not using it as intended or if there is a bug.

I would like to use a custom button component to trigger the dropdown like so,

<MenuButton as="template"><MyCustomButton>Options</MyCustomButton></MenuButton>

however when I open the dropdown, I get the following error: [Vue warn]: Property “id” was accessed during render but is not defined on instance. Uncaught TypeError: _buttonRef$value.contains is not a function

Im using the latest version of Vue 3, 0.1.3 of Headless UI.

Issue Analytics

State:
Created 3 years ago
Comments:6

Top GitHub Comments

1reaction

RobinMalfaitcommented, Sep 30, 2020

By default we use a button, and we put a bunch of properties on that button. If you use a custom button (like how you did it) then we put all those properties on the custom component. If I explore this in codesandbox than you can see that all the correct stuff is applied (You can either inspect the DOM or the attrs) https://codesandbox.io/s/headlessuivue-menu-example-forked-vvzft?file=/src/App.vue

However, the actual DOM ref is not applied correctly. I have to come back to this issue because I am not 100% sure why this is happening (or rather not happening).

0reactions

RobinMalfaitcommented, Feb 19, 2021

Hey!

This should be fixed, and will be available in the next release. You can already try it using npm install @headlessui/vue@dev or yarn add @headlessui/vue@dev.

Fixed it in #249, thanks for the extra pointers @a47ae.

Here is an example with the new (dev) version: https://codesandbox.io/s/headlessuivue-menu-example-forked-vvzft?file=/src/App.vue

Top Results From Across the Web

How to Create a Custom Select Dropdown using HTML, CSS ...

A post on how to create a custom select dropdown using HTML, CSS and JavaScript. Should you build it from scratch or use...

Customize a reusable React dropdown menu component

A dropdown component, which is a custom version of the dropdown select option with extended styles, sorts and filters content on webpages.

How to use a dropdown in a component to control a variable

Creating a component custom property called Selected, defined as an Output property of type Record, and set to Dropdown.Selected within the component allows...

React Suite Dropdown Trigger - GeeksforGeeks

In this article, we'll learn about React suite dropdown trigger. ... toggleAs: This helps in using a custom element for this component.

Trigger Custom Dropdown w/ jQuery - Stack Overflow

$el = $( element ); this._init( options ); }; // the options $.DropDown. ... value is the margin to start with slidingIn :...