search

adobe / spectrum-web-components

Spectrum Web Components
https://opensource.adobe.com/spectrum-web-components/
Apache License 2.0
1.25k stars 200 forks source link

[Bug]: Base.ts:177 Uncaught TypeError: this._dirParent.stopManagingContentDirection is not a function #4801

Open misterduncan opened 6 days ago

misterduncan commented 6 days ago

Code of conduct

Impacted component(s)

Slider

Expected behavior

The Slider component should unmount without errors

Actual behavior

On unmount, the Slider component throws the following:

Base.ts:177 Uncaught TypeError: this._dirParent.stopManagingContentDirection is not a function at Slider.disconnectedCallback (Base.ts:177:52) at Slider.disconnectedCallback (focus-visible.ts:141:49) at Slider.disconnectedCallback (Slider.ts:237:15) at removeChild (react-dom.development.js:11099:18) at commitDeletionEffectsOnFiber (react-dom.development.js:24067:15) at recursivelyTraverseDeletionEffects (react-dom.development.js:24028:5) at commitDeletionEffectsOnFiber (react-dom.development.js:24157:9) at recursivelyTraverseDeletionEffects (react-dom.development.js:24028:5) at commitDeletionEffectsOnFiber (react-dom.development.js:24157:9) at recursivelyTraverseDeletionEffects (react-dom.development.js:24028:5) at commitDeletionEffectsOnFiber (react-dom.development.js:24157:9) at commitDeletionEffects (react-dom.development.js:24015:5) at recursivelyTraverseMutationEffects (react-dom.development.js:24298:9) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24332:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24332:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24332:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24332:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24332:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24332:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24615:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24471:9) at commitMutationEffects (react-dom.development.js:24282:3) at commitRootImpl (react-dom.development.js:26849:5) at commitRoot (react-dom.development.js:26721:5) at performSyncWorkOnRoot (react-dom.development.js:26156:3) at flushSyncCallbacks (react-dom.development.js:12042:22) at react-dom.development.js:25690:13

Screenshots

image

What browsers are you seeing the problem in?

Chrome

How can we reproduce this issue?

Add Slider to React component which can show/hide. On hide, check console log.

Sample code or abstract reproduction which illustrates the problem

import { useEffect, useRef, useState } from 'react'; import { Slider, SliderHandle } from '@swc-react/slider';

import "@spectrum-web-components/theme/theme-light.js"; import "@spectrum-web-components/theme/scale-medium.js";

const range = { start: 3, end: 10 };

export default function FilterSlider({ name, options }) { const [min, setMin] = useState(range.start); const [max, setMax] = useState(range.end); const sliderRef = useRef(null);

useEffect(() => {
    const sliderElement = sliderRef.current;

    const handleSliderChange = (e) => {
        console.log('Slider changed:', e);

        const value = e.target.value;
        const name = e.target.name;

        if (name === 'min') {
            setMin(value);
        }
        else if (name === 'max') {
            setMax(value);
        }

    };

    if (sliderElement) {
        sliderElement.addEventListener('change', handleSliderChange);
    }

    return () => {
        if (sliderElement) {
            sliderElement.removeEventListener('change', handleSliderChange);
        }
    };
}, []);

return (
    <div>
        <sp-theme
            color="light"
            scale="medium"
            theme="express">
            <Slider 
                ref={sliderRef}
                variant="range" 
                step={1}
                min={0}
                max={20}
            >
                Output Levels
                <SliderHandle
                    slot="handle"
                    name="min"
                    label="Minimum"
                    value={min}
                ></SliderHandle>
                <SliderHandle
                    slot="handle"
                    name="max"
                    label="Maximum"
                    value={max}
                ></SliderHandle>
            </Slider>
        </sp-theme>
    </div>
);

}

Severity

SEV 2

Logs taken while reproducing problem

Base.ts:177 Uncaught TypeError: this._dirParent.stopManagingContentDirection is not a function at SliderHandle.disconnectedCallback (Base.ts:177:52) at SliderHandle.disconnectedCallback (focus-visible.ts:141:49) at removeChild (react-dom.development.js:11099:18) at commitDeletionEffectsOnFiber (react-dom.development.js:24067:15) at recursivelyTraverseDeletionEffects (react-dom.development.js:24028:5) at commitDeletionEffectsOnFiber (react-dom.development.js:24157:9) at recursivelyTraverseDeletionEffects (react-dom.development.js:24028:5) at commitDeletionEffectsOnFiber (react-dom.development.js:24157:9) at recursivelyTraverseDeletionEffects (react-dom.development.js:24028:5) at commitDeletionEffectsOnFiber (react-dom.development.js:24157:9) at commitDeletionEffects (react-dom.development.js:24015:5) at recursivelyTraverseMutationEffects (react-dom.development.js:24298:9) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24332:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24332:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24332:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24332:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24332:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24385:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24332:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24615:9) at recursivelyTraverseMutationEffects (react-dom.development.js:24312:7) at commitMutationEffectsOnFiber (react-dom.development.js:24471:9) at commitMutationEffects (react-dom.development.js:24282:3) at commitRootImpl (react-dom.development.js:26849:5) at commitRoot (react-dom.development.js:26721:5) at performSyncWorkOnRoot (react-dom.development.js:26156:3) at flushSyncCallbacks (react-dom.development.js:12042:22) at react-dom.development.js:25690:13

misterduncan commented 6 days ago

I've just managed to resolve this by adding the Theme wrapper properly - looks like a user error :)

It could be useful to add something to the React wrapper docs about using these components in isolation without applying theming to the whole app.