Stack Overflow
Stack Overflow

Questions tagged [react-aria]

20 questions
7
votes
3 answers

ReferenceError: document is not defined in Next.js while working with React Aria overlays

I'm learning Next.js for web development and I came across commerce, a boilerplate for e-commerce websites written in Next.js. As I was browsing through the code I found the Sidebar component which uses React Aria for creating overlays. I wanted to…
Bas
  • 2,106
  • 5
  • 21
  • 59
4
votes
1 answer

Argument of type null is not assignable to parameter of type RadioGroupState

I'm trying to build a design-system in Typescript using React-Aria and I am having some trouble with the Radio component. I tried to follow the example as much as I could but I ended up with : Argument of type 'null' is not assignable to parameter…
greg
  • 41
  • 2
2
votes
1 answer

React Aria in Next.js error: Prop `id` did not match

I am testing out React Aria in Next.js and I keep getting this error. Warning: Prop id did not match. Server: "react-aria-3" Client: "react-aria-10" Wrapping _app.js with the SSRProvider component does not resolve this issue export default…
Shawn
  • 109
  • 1
  • 12
2
votes
0 answers

React-aria events are ignored in new window portal

I am using react-aria library for web app accessibility and I would like to render button in a new browser tab. First, I will define react-aria button: const MyButton = props => { const ref = useRef(); const { buttonProps } =…
Michal
  • 1,755
  • 3
  • 21
  • 53
2
votes
0 answers

Test with react-aria useButton gives me the famous "act" warning

I'm using react-aria and react testing-library. In my Button component, i'm using react-aria's useButton and I use onPress prop to pass the function to call once click. In the unit test, I just try to click it in order to trigger a simple jest.fn()…
sevenlops
  • 456
  • 1
  • 4
  • 18
1
vote
0 answers

react-aria useHover doesn't detect leave hover when used with TooltipTrigger

I'm using Tooltip from react-aria-components and useHover from react-aria Docs to React Aria - useHover Docs to React Aria Components - Tooltip I'm facing a bug where when the Tooltip is displayed, useHover doesn't detect leave hover. I made a…
Max
  • 81
  • 1
  • 5
1
vote
1 answer

React Aria with Next.js: Issues with SSRProvider Setup

I'm trying to integrate React Aria into my Next.js project, but I'm having trouble determining whether the React Aria providers should be used as client or server components. I'm using the app directory architecture (https://beta.nextjs.org/docs),…
Rémi Bernard
  • 89
  • 7
1
vote
1 answer

Is it possible to import react-aria's PressEvent?

The react-aria docs describe a PressEvent and its properties. However I have not managed to find it anywhere in @react-aria node_modules directory to import it into my .tsx component. Has anyone managed this?
Joseph Beuys' Mum
  • 2,395
  • 2
  • 24
  • 50
1
vote
1 answer

React-aria | typescript error on input/ textfield

I would like to work with react-aria. Unfortunately I don't get this far. I followed the documentation (https://react-spectrum.adobe.com/react-aria/useTextField.html) but this Error pops up on the input Element. Hope somebody can help…
nuje
  • 43
  • 3
1
vote
2 answers

usePreventScroll causes useLayoutEffect warning in Nextjs

I'm learning Next.js and I'm trying to integrate the @react-aria/overlays package in my project. I have a layout component, where I'm simply invoking the usePreventScroll method like this: usePreventScroll({ isDisabled: true }); This…
Bas
  • 2,106
  • 5
  • 21
  • 59
0
votes
1 answer

react-aria useButton hook disabling accessibility functionality rather than supporting it

I'm integrating the react-aria hook library into my codebase to ensure that my custom components properly meet all ARIA accessibility requirements. I've immediately noticed however that when I use the props generated by the library's useButton hook…
Zach Kaigler
  • 279
  • 5
  • 15
0
votes
1 answer

Cannot find type for useTabListState in react-aria

I'm testing react-aria tabs and I'm trying to add types to their example. The thing is, I'm not sure which type to use for the props used in the tabs component. useTabListState uses TabListStateOptions but I can't find them in the packages. I…
Artur Carvalho
  • 6,901
  • 10
  • 76
  • 105
0
votes
0 answers

How can I make React-aria with NextJs new app directory server side rendering work?

I am using Internationalization (i18n) in Server Components. My layout component is like this import LanguageSwitcher from '@/components/common/LanguageSwitcher'; import { Inter } from 'next/font/google'; import { notFound } from…
Ufuk UYSAL
  • 87
  • 8
0
votes
1 answer

React Aria Combobox does not filter the entries based on the input

Hello I'm using the Combobox from React aria I have followed official docs however once I enter something in the input there is no filtering happening. For instance if you write PHP in the combobox it still shows the rest of entries which is…
Verthon
  • 2,937
  • 3
  • 20
  • 32
0
votes
1 answer

How to create React Aria DatePicker with Year or Decade view

I'm building a React-Aria DatePicker but I haven't been able to find a way of creating a year or decade view. That is, where is shows the 12 months of the year and allows me to toggle the previous and next buttons on a year by year basis, or where…
Matt Wendzina
  • 33
  • 5
1
2