Select dropdown makes Safari 13.0.3 freeze (not responding)

[adolfoyanes]

The following code belongs to a Select on a form. It works on Chrome perfectly but the moment you click on top the of the select Safari 13.0.3 will stop responding. I have to force quit or it just stays like that. Does not show any error on console or warnings. When compiling shows warnings that seem unrelated Any clues?

import React from 'react';
import {Select} from '@shopify/polaris';

export default class SelectPaqueteria extends React.Component {
state = {
selected: this.props.theValue,
};

handleChange = (newValue) => {
this.setState({selected: newValue});
this.props.callbackFromAuto(["paqueteria",newValue])
};

render() {
const options = [
{label: 'Seleccionar Paqueteria', value: '0'},
{label: 'Will Call', value: 'Will Call'},
{label: 'Marketful', value: 'Marketful'},
{label: 'FedEx', value: 'FedEx'},
{label: 'UPS', value: 'UPS'},
{label: 'DHL', value: 'DHL'},
{label: 'Estafeta', value: 'Estafeta'},
{label: 'Paquetexpress', value: 'Paquetexpress'},

];

return (
  <Select
    id="el_select1"
    label=""
    options={options}
    onChange={this.handleChange}
    value={this.state.selected}
  />
);

}
}

My package.json is....

{
"name": "myapp",
"private": true,
"dependencies": {
"@rails/webpacker": "3.5",
"@shopify/polaris": "^4.8.0",
"@shopify/polaris-icons": "^3.8.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"jquery": "^3.3.1",
"mdbreact": "^4.15.0",
"moment": "^2.23.0",
"mui-datatables": "^2.6.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-bootstrap-table-next": "^3.1.5",
"react-bootstrap-table2-toolkit": "^2.0.1",
"react-dom": "^16.8.6",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-z-index": "^2.3.0",
"react_ujs": "^2.5.0",
"read-excel-file": "^4.0.3",
"resolve-url-loader": "^3.1.0",
"webpack-cli": "^3.3.2"
},
"devDependencies": {
"webpack-dev-server": "2.11.2"
}
}

The warnings:
(Emitted value instead of an instance of Error) postcss-custom-properties: /Users/adolfoyanes/rails_projects/myapp/node_modules/@shopify/polaris/styles.css:1057:7: variable '--p-interactive-action-hovered' is undefined and used without a fallback

This is just one of it. there are lots of them.

[ghost]

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[AndrewMusgrave]

Hi @adolfoyanes there's a browser bug with safari v13 where text-rendering: optimizeLegibility on select causes the browser to crash. It seems highly likely that this is the cause, can you check your styles?

[BPScott]

No response, pretty sure we fixed this back in #2179