From 7803c4b826119ab139d6cd7f96e627498ccba2b9 Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Mon, 25 Nov 2024 18:44:02 +0800 Subject: [PATCH] Fix PR comments --- docs/data/material/components/slider/slider.md | 4 ++-- packages/mui-material/src/Slider/useSlider.ts | 10 ++++------ 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md index c12620cc4b1e19..ee98d4067e5d7f 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -103,12 +103,12 @@ Set the `orientation` prop to `"vertical"` to create vertical sliders. The thumb {{"demo": "VerticalSlider.js"}} :::warning -Chrome versions below 124 implements `aria-orientation` incorrrectly for vertical sliders and exposes them as `'horizontal'` in the accessibility tree. ([Chromium issue #40736841](https://issues.chromium.org/issues/40736841)) +Chrome versions below 124 implements `aria-orientation` incorrectly for vertical sliders and exposes them as `'horizontal'` in the accessibility tree. ([Chromium issue #40736841](https://issues.chromium.org/issues/40736841)) The `-webkit-appearance: slider-vertical` CSS property can be used to correct this for these older versions, with the trade-off of causing a console warning in newer Chrome versions: ```css -.MuiSlider-thumb > input { +.MuiSlider-thumb input { -webkit-appearance: slider-vertical; } ``` diff --git a/packages/mui-material/src/Slider/useSlider.ts b/packages/mui-material/src/Slider/useSlider.ts index 3c3bcf4f4bb7c2..7dc3b3b2b54b99 100644 --- a/packages/mui-material/src/Slider/useSlider.ts +++ b/packages/mui-material/src/Slider/useSlider.ts @@ -687,12 +687,10 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue }; }; - const cssWritingMode = React.useMemo(() => { - if (orientation === 'vertical') { - return isRtl ? 'vertical-rl' : 'vertical-lr'; - } - return undefined; - }, [isRtl, orientation]); + let cssWritingMode: 'vertical-rl' | 'vertical-lr' | undefined; + if (orientation === 'vertical') { + cssWritingMode = isRtl ? 'vertical-rl' : 'vertical-lr'; + } const getHiddenInputProps = = {}>( externalProps: ExternalProps = {} as ExternalProps,