输入清除按钮在Microsoft Edge中不起作用

Question

I am using reactjs, redux form and semantic UI react to build an application. The following codes behavior differently in IE11, Edge, and Chrome. I have included polyfill in the index.js

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

In IE11, the input will be rendered with a clear button, and it works well.

In Chrome, the input does not have a clear button.

In edge, the input has a clear button, but it cannot clear the input after clicked.

I have created a demo project for this issue: https://codesandbox.io/s/redux-form-field-level-validation-zedcu?fontsize=14

Can anyone tell me why it does not work in edge? Help is appreciated.

import React from "react";
import { Field } from "redux-form";
import { Form } from "semantic-ui-react";
import RenderFieldInput from "../../formElements/Input";
import RenderFieldSelect from "../../formElements/Select";
import { YES_NO } from "../../formElements/SelectOptions";
import { required, email } from "redux-form-validators";
import { createNumberMask, createTextMask } from 'redux-form-input-masks';

const currencyMask = createNumberMask({
  prefix: '$ ',
  suffix: '',
  decimalPlaces: 2,
  locale: 'en-US',
})

const BorrAttributes = () => {
  return (
    <div>
      <Form.Group widths="equal">
        <Field
          name="email"
          component={RenderFieldInput}
          label="Email"
          required="Y"
          validate={[required(), email()]}
        />
        <Field
          name="secondEmail"
          component={RenderFieldInput}
          label="Second Email"
          validate={[email()]}
        />
      </Form.Group>
    </div>
  );
};

export default BorrAttributes;

import React from "react";
import { Form, Popup } from "semantic-ui-react";
import Tooltip from "./Tooltip";

const RenderFieldInput = ({
  input,
  label,
  placeholder,
  required,
  meta: { touched, error, warning }
}) => (
  <Popup
    trigger={
      <Form.Input
        {...input}
        label={label}
        placeholder={placeholder}
        error={error ? true : null}
        required={required === "Y" ? true : null}
        fluid
      />
    }
  >
    <Tooltip touched={touched} error={error} warning={warning} />
  </Popup>
);

export default RenderFieldInput;

Answer 1

这是Microsoft Edge的已知问题https://developer.microsoft.com/zh-cn/microsoft-edge/platform/issues/17584515/

Answer 2

The issue is related to the "RenderFieldInput" component, perhaps it is related to the Popup, I think you could feedback this issue to Semantic-UI-React forum .

As a temporary workaround, you could try to remove this component. Code as below:

const FieldLevelValidationForm = props => {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component="input"
        validate={[required()]}
        label="Username"
      />
    </form>
  );
};

More details about semantic UI react Popup, you could check this link