CODEWITHSUNDEEP
javascriptreactjssemantic-uisemantic-ui-react
user944513
user944513

Reputation: 12729

Why datepicker flicker in React when focus in input field?

Could someone please tell me why datepicker flickers in React when focus in input field?

I am using this date picker in my demo

https://www.npmjs.com/package/semantic-ui-calendar-react

but it flickers on focus or in other words when I focus to input field its first show on top and then come down below input field, why? Here is my code

https://codesandbox.io/s/prod-hill-mpurn

<div style={{ position: "absolute", top: 100, left: 100 }}>
        <DateInput
          name="date"
          placeholder="Date"
          value={date}
          popupPosition="right"
          onChange={handleChange}
        />
</div>

Any update ?

Upvotes: 2

Views: 2183

Answers (1)

Suthan Bala
Suthan Bala

Reputation: 3299

It has a default animation of scale. You can turn it off by passing the prop `animation={false} like the following.

<DateInput
          name="date"
          placeholder="Date"
          value={date}
          popupPosition="right"
          onChange={handleChange}
          animation={false}
        />

CodeSandbox: https://codesandbox.io/s/hloid

Upvotes: 4

Related Questions