Comments (1)
Hey!
You have to make sure that you forward all incoming props and the ref
as well. This way the Menu.Item
can add the necessary event listeners to your custom button.
You can update your button to something like this:
const DeleteButton = forwardRef<
HTMLButtonElement,
{
classification: { name: string };
active: boolean;
}
>(
(
{
classification,
active,
...rest // Accept all other props
},
ref // Accept the `ref`
) => {
return (
<button
{...rest} // Forward the incoming props
ref={ref} // Forward the ref
type="button"
className={`${
active ? 'bg-gray-100' : ''
} flex w-full items-center px-4 py-2 text-sm`}
>
{/* <TrashIcon className="mr-2 h-4 w-4 text-gray-400 group-hover:text-gray-500" aria-hidden="true" /> */}
Remove,{classification.name}
</button>
);
}
);
Hope this helps!
from headlessui.
Related Issues (20)
- Switch component cannot stop propagation HOT 2
- Portal doesn't work in [email protected] after clientside navigation between pages. HOT 2
- Always render hidden inputs HOT 1
- ListboxButtons cause hydration errors in Nuxt HOT 3
- Dialog causes layout reflow which causes bad performance for large DOM trees HOT 1
- Warping transition while using overflow HOT 1
- Vue warn about getters not being side-effect free HOT 5
- The Menu component is not being propagated the touch event to the parent, so the Menu does not close automatically as expected. HOT 4
- [Dialog] Leave transition not working when using `:unmount="false"` (vue)
- Combobox `disabled` attribute not disabling hidden inputs HOT 1
- Tabs: `selectedIndex` is not selecting the correct tab HOT 3
- Combobox active item should loop
- Transition no longer maintaining class specified in enterTo at end of transition. HOT 4
- Combobox should navigate to first element when pressing arrow down HOT 3
- Aria-describedby for listbox hidden inputs HOT 2
- ComboBox.Option conflicts with generic Checkbox and HTML label HOT 1
- Unable to attain leave transition on HeadlessUI's Dialog component.
- Tabs - Vue: Computed is still dirty HOT 1
- Cannot focus out of popover within modal
- Popover.js: Attempted import error: 'createContext' is not exported from 'react' (imported as 'Q'). HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from headlessui.