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:
cursor: pointer;
al elementosetIsFocused(false);
a setTimeout(() => setIsFocused(false), 0);
onTap
y onTapStart
idéntico al onClick
MiajAddressSearch__Results
)Cualquier ayuda sería muy apreciada.