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

[misterduncan]

Code of conduct

• I agree to follow this project's 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

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]

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.

[najikahalsema]

Closing this as it was a usage issue, but we will follow up with a ticket to expand the documentation around ReactWrapper.

[najikahalsema]

@misterduncan What specifically would you like to see added in the docs? I just checked and found documentation regarding the need for sp-theme. For reference, our components should be wrapped in sp-theme in order to be properly styled.