Me gustaría envolver el grupo de botones de opción con un ancho de 200 px. Y espero que la navegación del teclado se comporte de la misma manera, que es moverse entre los botones de radio a través de la flecha derecha/izquierda de un lado a otro. Lo raro es que si implemento el div padre envolviendo este componente Container const Container = ({ children }) => ( <div style={{ width: "200px" }}>{children}</div>); , después de pasar a otro botón de radio una vez, se detiene. Ya no puedo navegar por los botones de opción. Pero si implemento div principal usando código html simple <div style={{ width: "200px"}}> , la navegación con el teclado funciona bien. Cuando inspecciono usando herramientas de desarrollo, semánticamente, ambos parecen iguales. Así que tengo problemas para averiguar por qué el componente Container afecta la navegación del teclado mientras que la codificación en html no lo hace. ¿Alguien sabe por qué? https://codesandbox.io/s/radio-button-example-3t8l80?file=/App.js
import { Stack, RadioButton } from "@shopify/polaris"; import { useState, useCallback } from "react"; function RadioButtonExample() { const [value, setValue] = useState("disabled"); const handleChange = useCallback( (_checked, newValue) => setValue(newValue), [] ); const Container = ({ children }) => ( <div style={{ width: "200px" }}>{children}</div> ); return ( <Container> // keyboard navigation doesn't work properly with this {/* <div style={{ width: "200px"}}> */} // keyboard navigation works fine <Stack vertical> <RadioButton label="Accounts are disabled" helpText="Customers will only be able to check out as guests." checked={value === "disabled"} id="disabled" name="accounts" onChange={handleChange} /> <RadioButton label="Accounts are optional" helpText="Customers will be able to check out with a customer account or as a guest." id="optional" name="accounts" checked={value === "optional"} onChange={handleChange} /> </Stack> {/* </div> */} </Container> ); } export default RadioButtonExample;La razón de que esto suceda es que su componente Container es parte del componente RadioButtonExample . Cada vez que se actualiza un estado o una propiedad, el componente Container se crea como un componente nuevo. Para evitar esto, lleve su componente Container fuera de RadioButtonExample de esta manera:
import { Stack, RadioButton } from "@shopify/polaris"; import { useState, useCallback } from "react"; const Container = ({ children }) => ( <div style={{ width: "200px" }}>{children}</div> ); function RadioButtonExample() { const [value, setValue] = useState("disabled"); const handleChange = useCallback( (_checked, newValue) => setValue(newValue), [] ); return ( <Container> <Stack vertical> <RadioButton label="Accounts are disabled" helpText="Customers will only be able to check out as guests." checked={value === "disabled"} id="disabled" name="accounts" onChange={handleChange} /> <RadioButton label="Accounts are optional" helpText="Customers will be able to check out with a customer account or as a guest." id="optional" name="accounts" checked={value === "optional"} onChange={handleChange} /> </Stack> </Container> ); } export default RadioButtonExample; Una solución diferente sería envolver el contenedor en un useMemo para asegurarse de que permanezca igual. Esto te daría algo como esto:
const Container = useMemo(() => ({ children }) => ( <div style={{ width: "200px" }}>{children}</div> ), []);Ambos funcionarán, pero sugeriría optar por la primera solución.