Focus: Failed to execute 'createTreeWalker' on 'Document': parameter 1 is not of type 'Node'.

[ghost]

Hello, I basically combined the select / button examples to create a new select component but encounter this error.

<Select label="test">
       {['red', 'green', 'blue'].map(item => (
                <Item key={item.key}>{item}</Item>
        ))}
</Select>

Examples reference:

https://react-spectrum.adobe.com/react-aria/useSelect.html
https://react-spectrum.adobe.com/react-aria/useButton.html

Code:

Select.tsx:

import Button from '@/components/Button'
import { SelectProps } from '@react-types/select'
import { AnimatePresence } from 'framer-motion'
import { styled } from 'linaria/react'
import React from 'react'
import { HiddenSelect, useButton, useSelect } from 'react-aria'
import { useSelectState } from 'react-stately'
import { SelectContext } from './context'
import Options from './Options'

const Select = (props: SelectProps<T>) => {
    let state = useSelectState(props)
    let ref = React.useRef(null)
    let { labelProps, triggerProps, valueProps, menuProps } = useSelect(props, state, ref)


    return (
        <Wrapper>
            {props.label && <Label {...labelProps}>{props.label}</Label>}
            <HiddenSelect state={state} triggerRef={ref} label={props.label} name={props.name} />
            <Button
                ref={ref}
                {...triggerProps}
                label={
                    <>
                        <span {...valueProps}>
                            {state.selectedItem ? state.selectedItem.rendered : 'Select an option'}
                        </span>
                    </>
                }
                rightIcon={
                    <span aria-hidden="true" style={{ paddingLeft: 5 }}>
                        ▼
                    </span>
                }
            />

            <SelectContext.Provider
                value={{
                    selectState: state,
                }}
            >
                <AnimatePresence>{state.isOpen && <Options {...menuProps} state={state} />}</AnimatePresence>
            </SelectContext.Provider>
        </Wrapper>
    )
}

export default Select

const Wrapper = styled.div`
    position: relative;
    display: inline-block;
`
const Label = styled.div``

Options.tsx:

import { motion, Variants } from 'framer-motion'
import { styled } from 'linaria/react'
import React from 'react'
import { DismissButton, FocusScope, mergeProps, useListBox, useOverlay } from 'react-aria'
import { SelectState } from 'react-stately'
import { useSelect } from './context'
import Option from './Option'

type Props = {
    state: SelectState<T>
}

const Options = ({ state, ...otherProps }: Props) => {
    let ref = React.useRef()

    let { listBoxProps } = useListBox(
        {
            autoFocus: state.focusStrategy || true,
            disallowEmptySelection: true,
            ...otherProps,
        },
        state,
        ref,
    )

    let overlayRef = React.useRef()
    let { overlayProps } = useOverlay(
        {
            onClose: () => state.close(),
            // shouldCloseOnBlur: true,
            isOpen: state.isOpen,
            isDismissable: true,
        },
        overlayRef,
    )

    const { selectState } = useSelect()

    const { isOpen } = selectState

    return (
        <FocusScope contain autoFocus={false} restoreFocus>
            <Wrapper {...overlayProps} ref={overlayRef}>
                <DismissButton onDismiss={() => state.close()} />
                <Container
                    {...mergeProps(listBoxProps, otherProps)}
                    ref={ref}
                    variants={variants}
                    initial={isOpen ? 'hidden' : 'show'}
                    animate={isOpen ? 'hidden' : 'show'}
                    exit={isOpen ? 'hidden' : 'show'}
                >
                    {[...state.collection].map(item => (
                        <Option key={item.key} item={item} state={state} />
                    ))}
                </Container>
            </Wrapper>
        </FocusScope>
    )
}

export default Options

const Wrapper = styled.div``

const Container = styled(motion.div)`
    position: absolute;
    width: 100%;
    margin: 4px 0 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-secondary);
    background: var(--color-background);
    border-radius: var(--layout-border-radius);
`

const variants: Variants = () => ({
    show: {
        opacity: 1,
        transition: {
            duration: 0.5,
        },
    },
    hidden: {
        opacity: 0,
        transition: {
            duration: 0.5,
        },
    },
})

Option.tsx:

import { motion } from 'framer-motion'
import { styled } from 'linaria/react'
import React from 'react'
import { mergeProps, useFocus, useOption } from 'react-aria'
import { ListState } from 'react-stately'

type Props = {
    item: {
        key: string | number
        rendered: React.ReactNode
    }
    state: ListState<T>
}

const Option = ({ item, state }: Props) => {
    let ref = React.useRef()
    let isDisabled = state.disabledKeys.has(item.key)
    let isSelected = state.selectionManager.isSelected(item.key)
    let { optionProps } = useOption(
        {
            key: item.key,
            isDisabled,
            isSelected,
            shouldSelectOnPressUp: true,
            shouldFocusOnHover: true,
        },
        state,
        ref,
    )

    let [isFocused, setFocused] = React.useState(false)
    let { focusProps } = useFocus({ onFocusChange: setFocused })

    return (
        <Wrapper {...mergeProps(optionProps, focusProps)} ref={ref} isFocused={isFocused} isSelected={isSelected}>
            {item.rendered}
        </Wrapper>
    )
}

export default Option

const Wrapper = styled(motion.li)`
    background-color: ${props => (props.isSelected ? 'blue' : props.isFocused ? 'gray' : 'transparent')};
    color: ${props => (props.isSelected || props.isFocused ? 'var(--color-foreground)' : 'var(--color-secondary)')};
    padding: 2px 5px;
    outline: none;
    cursor: pointer;
`

Button.tsx:

import { AriaButtonProps } from '@react-types/button'
import { motion } from 'framer-motion'
import { styled } from 'linaria/react'
import React from 'react'
import { useButton } from 'react-aria'

type Props = {
    icon?: React.ReactNode
    label?: string
    size?: number
    rightIcon?: React.ReactNode
} & AriaButtonProps<'button'>

const Button = React.forwardRef<any, Props>(({ icon, label, size = 36, rightIcon, ...props }, ref) => {
    const { buttonProps } = useButton(props, ref)
    return (
        <StyledButton {...buttonProps} ref={ref}>
            <Focus tabIndex={-1}>
                {icon && <Icon size={size}>{icon}</Icon>}
                {label && <Label hasIcon={Boolean(icon)}>{label}</Label>}
                {rightIcon && <Icon size={size}>{rightIcon}</Icon>}
            </Focus>
        </StyledButton>
    )
})

export default React.memo(Button)

const StyledButton = styled(motion.button)`
    padding: 0;
    margin: 0;
    border: none;
    display: flex;
    background-color: transparent;
    cursor: pointer;
    transition: opacity 300ms ease-in-out;
    appearance: none;
    border: none;
    &:focus,
    &:active {
        outline: none;
        & > div {
            box-shadow: var(--shadow-button);
            transition: box-shadow 300ms ease-in-out;
        }
    }

    &:disabled {
        cursor: not-allowed;
        opacity: 0.2;
        transition: opacity 300ms ease-in-out;
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover:not(:disabled) {
            & > div {
                background-color: var(--color-link) !important;
                transition: background-color 300ms ease-in-out;
            }
        }
    }
`
const Focus = styled(motion.div)`
    width: 100%;
    height: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    border-radius: var(--border-radius-button);
    overflow: hidden;
    transition: box-shadow 300ms ease-in-out;
    background-color: var(--color-accents-7);
    &:hover:not(:disabled) {
        background-color: var(--color-link);
    }
    &:focus,
    &:active {
        outline: none;
        background-color: var(--color-link);
    }
`
const Icon = styled(motion.div)`
    display: flex;
    flex-shrink: 0;
    width: ${props => props.size}px;
    height: ${props => props.size}px;
    padding: 8px;
    background-color: var(--color-background);
    color: var(--color-foreground);
    fill: var(--color-foreground);
    stroke: var(--color-foreground);
`

const Label = styled.div`
    color: var(--color-foreground);
    padding: 8px 16px;
    padding-left: ${p => (p.hasIcon ? 8 : 16)}px;
`

[snowystinger]

Sorry, but what's the error your are encountering?
Would you mind putting this into a codesandbox? https://codesandbox.io/

[ghost]

Hello, I created a popover component and wrapped it into a select component. Got no errors here in codesandbox, but the popover component just did not show up when in localhost environment, without errors in console. No DOM nodes were inserted after body, only the 'user-select:none' was append to HTML styles and then got removed.

https://codesandbox.io/s/flamboyant-rain-ofkpp

[ghost]

The popover component works as expected

[ghost]

The default example also does not work for me (it behaves the same as described above, the ListBoxPopup does not show).

https://react-spectrum.adobe.com/react-aria/useSelect.html

Chrome: Version 90.0.4430.212 (Official Build) (x86_64)
Firefox Nightly: 90.0a1 (2021-05-11)
macOS Big Sur

[ghost]

Probably the same as #816

[snowystinger]

When you say the default example doesn't work for you? do you mean that page in our docs does not work? or that when you copied it into your local project is didn't work?

Are you doing server side rendering? Sometimes that causes issues, SSR hasn't been a focus of ours yet. Otherwise, I don't know what AnimatePresence is, have you tried removing that?

Would you be willing to debug a bit more to see what is causing it to not add the popover component to the dom?

#816 is pretty specific to FF Android, is there a reason you suspect it might be linked?

[eduardo-vargas]

@snowystinger Seems like this issue has come back, did you ever find the root cause of it?

I'm currently investigating some of our projects that are throwing this error but I see someone else has also reported it recently

testing-library/react-testing-library#1165

[snowystinger]

Title sounds suspiciously like an issue i just addressed, could you check if it was the same #3908 ?

[eduardo-vargas]

Unfortunately did not fix it :/ but I do think it could be related

The error I'm seeing in multiple places is:

   TypeError: Failed to execute 'createTreeWalker' on 'Document': parameter 1 is not of type 'Node'.

      at Object.exports.convert (node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/Node.js:25:9)
      at $a7a032acae3ddda9$export$2d6ec8fc375ceafa (node_modules/@react-aria/focus/dist/packages/@react-aria/focus/src/FocusScope.tsx:630:25)
      at $a7a032acae3ddda9$var$focusFirstInScope (node_modules/@react-aria/focus/dist/packages/@react-aria/focus/src/FocusScope.tsx:413:16)
      at node_modules/@react-aria/focus/dist/packages/@react-aria/focus/src/FocusScope.tsx:331:13

[eduardo-vargas]

(I installed "@adobe/react-spectrum": "3.0.0-nightly.1960", to test out the fix, I believe your change should've already been in last nights nightly release, correct?

[snowystinger]

It should be in the nightly, yes. I'll check more when I'm back in front of my computer. Thank you for providing the stack trace and actual error. It's probably an issue in FocusScope, not in react testing library.

You can verify if you have the fix by looking in your installed node_modules

[eduardo-vargas]

Correct! I think it's most likely related to FocusScope (I linked the RTL issue as that stack trace also mentions @react-aria/FocusScope)

But my projects also happen to be using RTL, so could be something related to the interaction between the two? TBD

[eduardo-vargas]

Just wanted to close the loop here in case anyone else encounters this issue in the future. We did some investigating and found that the issue was related to the animation some components have via OpenTransition where in a test environment like jest, the component was not done animating and createTreeWalker was called in an undefined state.

We solved it by adding a timeout helper function like the one below that will wait for a few ms while the component is done updating

function timeout(ms = 400): Promise<void> {
	return act(async () => {
		await new Promise((resolve) => setTimeout(resolve, ms));
	});
}

for example

 // inside a test environment 
await userEvent action that will open a component like a popover
await userEvent action that will close said event

await timeout(); // allow the components to finish updating

// continue with the test 

[wmra92]

I'm also having this error when using useDatePicker, it happens when I click the input, but the weird thing is that it happens randomly and depending where its clicked. (I'll post a proper thread in the upcoming days)

error

Uncaught TypeError: Failed to execute 'createTreeWalker' on 'Document': parameter 1 is not of type 'Node'.
    at $9bf71ea28793e738$export$2d6ec8fc375ceafa (webpack-internal:///(app-client)/./node_modules/@react-aria/focus/dist/import.mjs:591:27)
    at focusLast (webpack-internal:///(app-client)/./node_modules/@react-aria/datepicker/dist/import.mjs:862:96)
    at onPressStart (webpack-internal:///(app-client)/./node_modules/@react-aria/datepicker/dist/import.mjs:889:44)
    at triggerPressStart (webpack-internal:///(app-client)/./node_modules/@react-aria/interactions/dist/import.mjs:184:31)
    at pressProps.onPointerDown (webpack-internal:///(app-client)/./node_modules/@react-aria/interactions/dist/import.mjs:327:21)
    at HTMLUnknownElement.callCallback (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19437:14)
    at Object.invokeGuardedCallbackImpl (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19486:16)
    at invokeGuardedCallback (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19561:29)
    at invokeGuardedCallbackAndCatchFirstError (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19575:25)
    at executeDispatch (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30600:3)
    at processDispatchQueueItemsInOrder (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30632:7)
    at processDispatchQueue (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30645:5)
    at dispatchEventsForPlugins (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30656:3)
    at eval (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30846:12)
    at batchedUpdates$1 (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23743:12)
    at batchedUpdates (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27562:12)
    at dispatchEventForPluginEventSystem (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30845:3)
    at dispatchEvent (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28618:5)
    at dispatchDiscreteEvent (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28589:5)

Using

• nextjs: 13.4.2
• react-aria: 3.24.0
• react-stately: 3.22.0

[snowystinger]

Possibly related to #4514 (comment) and #4407

As noted in the first link, I have a theory for why it's happening, but we'll need to prove it.