Stack Overflow
Stack Overflow

Questions tagged [headless-ui]

Headless UI – Unstyled, fully accessible UI components

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. React Vue. Menu (Dropdown) · Listbox (Select).

https://headlessui.dev

154 questions
0
votes
0 answers

Typescript Error 7053 with react headlessui select component

I am making a reusable selector component using headlessUI ListBox that gives a drop down of array of objects, and lets the use select a choice. Here it is being used in main. //listbox data const people = [ { name: "Wade Cooper" }, {…
Zach philipp
  • 125
  • 6
0
votes
0 answers

Headless UI Modal - Fade Out not working with a button in its content

I am facing weird behavior with HeadlessUI's Modal component (via TailwindUI), used in Vue3. The Modal will correctly Fade Out when clicking the "close" button, pressing "Esc" or clicking outside the Modal's body, but it won't Fade In as soon as I…
Gaël Duval
  • 65
  • 5
0
votes
0 answers

HeadlessUI passing setState to abstracted ListBox is not setting the state

I am using HeadlessUI to abstract a listbox component. I can't seem to understand how I pass setState or a state changing function. Here is my listBox component import { ChevronUpDownIcon, XMarkIcon } from "@heroicons/react/20/solid"; import {…
Zach philipp
  • 125
  • 6
0
votes
0 answers

Making horizontal swipe in Playwright with Tab (HeadlessUI NextJs)

Hi I'm fairly new to e2e testing so one of the features I wanna test for mobile version in Playwright is horizontal swiping. On the mobile version I only have 1 product image displayed and user on mobile can swipe right to check other images of that…
Vedo
  • 976
  • 4
  • 21
0
votes
0 answers

Change value of Combobox (headlessui/react)

I am working on Combobox component of Headlessui/React. I am using the array to store the selected value const App = () => { const [instNames, setInstNames] = useState(Array(6).fill("")); const [branchNames, setBranchNames] =…
Gaurang Patel
  • 13
  • 2
0
votes
0 answers

How can I resize all components of a page by using headlessUI switch(toggle) in React, typescript?

Here is my code, the toggle switch from HeadlessUI is working but i have no idea when i toggle to 'big' that not only the switch become bigger (for that i can just create a css class and pass it as tailwind inside of the switch) but all the…
Peelerz
  • 1
  • 1
0
votes
0 answers

calling modal popup from another file using next.js

I am new to next.js. I am trying to use the headlessui for the modal however I want to create a dedicated file for the modal so it won't cluster the code in the header/navbar file. Navbar.js import { useRouter } from "next/router"; import React, {…
limb0
  • 1
  • 1
0
votes
1 answer

Headless UI Close/Open specific Disclosures

Hi can anyone help me on how to close/open specific Headless UI Disclosures. Right now when I open one disclosures, the others will be opened too. Here is the existing condition: What I like to achieve is that, when I open one disclosure the others…
Muhammad Haekal
  • 477
  • 6
  • 22
0
votes
0 answers

How to pass keyboard activation to internal component in Tailwind dropdown menu item?

I'm using Tailwind CSS and the HeadlessUI Menu component for React. The menu items are components that each contain a button that opens a dialog. This works correctly when using the menu with the mouse. But when using the menu with the keyboard, the…
Herb Caudill
  • 50,043
  • 39
  • 124
  • 173
0
votes
2 answers

Popover on hover vue headllessui

I'm trying to implement the popover from headlessui of vue package with hover. I try to use the mouseenter and mouseleave and the other mouse events but nothing change. Any solution? There is a better solution? i search on internet I cant nothing…
Dasd
  • 7
  • 4
0
votes
2 answers

Trying to make 5 star rating using React, tailwind CSS, and Headless UI

Trying to build a 5-star rating component just like the example link. peer-hover seems to work, yet peer-checked doesn't work as peer-hover does. (items contain an array [1,2,3,4,5], by the way) Could you point out the reason why this problem…
SKYnSPACE
  • 13
  • 3
0
votes
0 answers

HeadlessUI's select keeps invisible but opened, how to fix it?

I'm using the headless UI's select to choose a dev name, when I open it and I choose the option sometimes he keeps opened but insivible, then I need to click again in some option to actually close the select. Here's the code:
Rômulo Valentim
  • 21
  • 1
  • 6
0
votes
0 answers

React parent element not correctly updating combobox child component

So i'm building an app and since i'm using combobox multiple times i decided to create a reusable component as follow ( also is it necessary ? just curious ) import { useState, Fragment } from 'react' import { Combobox } from…
Sb Zakaria
  • 311
  • 6
  • 18
0
votes
0 answers

How to make a client component Next.js 13

I'm trying to turn a 3rd party component into a client component. Here is how nextjs does it Official Next.js Example app/carousel.js 'use client'; import { AcmeCarousel } from 'acme-carousel'; export default AcmeCarousel; app/page.js import…
user19666029
0
votes
0 answers

Popover on table rendering multiple instances in Vue3

I am trying to create a Vue component which wraps a Popoverfrom headlessui I am trying to toggle open close using the slot binding as suggested in the popover docs. I cannot get this to work. Nothing appears in the UI, even if I had it working ok…
godhar
  • 1,128
  • 1
  • 14
  • 34
1 2 3
…
10 11