Encontré un problema con un botón que funciona correctamente en un navegador en una computadora/Android, pero no funciona en iOS o el navegador Safari en Mac. Parece que el evento onClick no se dispara. El código está abajo para el contexto:

 <Popover> <div className="MiajAddressSearch__Results"> {searchPlacesResult.data.map((address) => ( <button type="button" onClick={() => { setIsFocused(false); setCanShip(true); setCurrentAddress(address); setSearchText(address.text); }} key={`address-${address.id}`} title={address.text} className="MiajAddressSearch__Result MiajAddressSearch__Result--clickable" > {address.text} </button> ))} <div ref={(element) => { if (element) { element.append(attributionsElement); } }} className="MiajAddressSearch__Result" > <img src={googleLogo} alt="Google Logo" /> </div> </div> </Popover>

Popover:

 const Popover = ({ children }) => ( <div className="MiajPopover__Container"> <div className="MiajPopover">{children}</div> </div> ); Popover.propTypes = { children: PropTypes.node, }; Popover.defaultProps = { children: null, };

Ventana emergente SCSS:

 .MiajPopover { position: relative; &__Container { position: absolute; } }

Ya he probado:

• Adición de cursor: pointer; al elemento
• Cambiando setIsFocused(false); a setTimeout(() => setIsFocused(false), 0);
• Agregar un controlador de eventos onTap y onTapStart idéntico al onClick
• Eliminando el div principal ( MiajAddressSearch__Results )

Cualquier ayuda sería muy apreciada.