diff --git a/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/App.tsx b/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/App.tsx new file mode 100644 index 0000000000000..3f8c400e235d4 --- /dev/null +++ b/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/App.tsx @@ -0,0 +1,12 @@ +import ComboBox from "./ComboBox"; + +function App() { + return ( +
+

ComboBox test

+ +
+ ); +} + +export default App; diff --git a/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/ComboBox.tsx b/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/ComboBox.tsx new file mode 100644 index 0000000000000..0645e0b2f0b12 --- /dev/null +++ b/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/ComboBox.tsx @@ -0,0 +1,65 @@ +import { useRef, useState, useLayoutEffect } from "react"; + +const OPTIONS = [ + "Short", + "Medium value", + "This_is_a_very_very_very_very_very_very_long_freeform_value_that_requires_horizontal_scrolling" +]; + +export default function ComboBox() { + const [value, setValue] = useState(""); + const listRef = useRef(null); + const scrollLeftRef = useRef(0); + + // Save scroll position + const handleScroll = () => { + if (listRef.current) { + scrollLeftRef.current = listRef.current.scrollLeft; + } + }; + + // Restore scroll position after React commits updates + useLayoutEffect(() => { + if (listRef.current) { + listRef.current.scrollLeft = scrollLeftRef.current; + } + }); + + return ( +
+ setValue(e.target.value)} + placeholder="Freeform typing..." + style={{ width: "100%", marginBottom: 6 }} + /> + + {/* IMPORTANT: this div must never be conditionally rendered */} +
+ {OPTIONS.map((opt) => ( +
+ {opt} +
+ ))} +
+
+ ); +} diff --git a/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/assets/react.svg b/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/assets/react.svg new file mode 100644 index 0000000000000..6c87de9bb3358 --- /dev/null +++ b/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/main.tsx b/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/main.tsx new file mode 100644 index 0000000000000..d9bd4b9f18088 --- /dev/null +++ b/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/main.tsx @@ -0,0 +1,11 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./ComboBox"; + +ReactDOM.createRoot( + document.getElementById("root")! +).render( + + + +); diff --git a/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/typescript.svg b/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/typescript.svg new file mode 100644 index 0000000000000..d91c910cc30bf --- /dev/null +++ b/apps/public-docsite-resources/src/Fixed-Issues/ComboBox (issue #35701)/src/typescript.svg @@ -0,0 +1 @@ + \ No newline at end of file