I’ve encountered an issue with a button that works properly in a browser on a computer / Android, but does not work in iOS or the Safari browser on Mac. It seems that the onClick event is not fired. Code is below for context:

            <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,
};

Popover SCSS:

.MiajPopover {
  position: relative;

  &__Container {
    position: absolute;
  }
}

I have already tried:

• Adding cursor: pointer; to the element
• Changing setIsFocused(false); to setTimeout(() => setIsFocused(false), 0);
• Adding an onTap and onTapStart event handler identical to the onClick
• Removing the parent div (MiajAddressSearch__Results)

Any help would be greatly appreciated.