clicking on react component programmatically

Question

I have found similar question in some regard , I guarantee this ain't a duplicate.

Background:
The component I'm using is the all popular react day picker. Since, I found it's <DayPickerInput/> so hard to customize, I ended up customizing the <DayPicker/> instead. I'm also using a react <Select> element for a dropdown, the default <select> (note the case) doesn't even work. To use this we had to pass some component to their captionElement prop, so the overall code till now looks like this:

//required variables defined
const [display, setDisplay] = useState(false);
<input onFocus={()=>setDisplay(true)/>
const MyCustomComponent = (props)=>{
 <Select name="monthDropdown" options={...options}/>
 <Select name="yearDropdown" options={...options}/>
}

...
display && <DayPicker
          {...props}
          captionElement={({ date, localeUtils }) => (
            <MyCustomComponent date={date} localeUtils={localeUtils} onChange={handleChange} />
          )}

The Question:
The problem is, when I click the ` component, it seems to get re-rendered, and there's a flicker on the first click(only the first click):

It appears it doesn't flicker once it gets the focus. The only "hackaround" I can think of is by programmatically clicking the datepicker as it appears, so that when the user clicks with a mouse there is no flicker. But, how do I do that with a library component, the ref property is not exposed, and I don't know any other way.

What can be a solution to this problem?

EDIT: The layout code is as so:

import 'Select' from 'react-select';
import 'DayPicker' from 'react-day-picker';

//main function:
const [popup, setPopup] = useState(false);
const [customDate, setCustomDate] = useState();
const [selectedMonth, setMySelectionOfMonth] = useState();
const [selectedDay, setMySelectionOfDay] = useState();
const [focusState, setFocusState] = useState();
const [focusDatePicker , setMyDatePickerFocus] = useState();

const handleInputFocusHere = ()=>{
    setPopup(true);
}

<input type="date" value={customDate||''} onFocus={handleInputFocusHere}/>

    popup && <MyCustomDatePicker
    //pass all the above context variables here/>

//more code 
//end



const MyCustomDatePicker (props) => {
    const {customDate, setCustomDate} = props;
    const {selectedMonth, setMySelectionOfMonth} = useState();
    const {selectedDay, setMySelectionOfDay} = useState();
    const {focusState, setFocusState} = useState();
    const {focusDatePicker , setMyDatePickerFocus} = useState();

  function MyCustomCalendar(props) {
    const { onChange } = props;

    function changeMyMonth(selectedOption) {
     //some code
    }

    function changeMyYear(selectedOption) {
        //some code
    }

    return (
      <div className="DayPicker" style={{ border: '0' }}>
        <div style={{ display: 'flex', flexDirection: 'row' }}>
          <div className="mr-4x" style={{ minWidth: '100px' }}>
            <Select
              options={monthData}
              styles={customStyles}
              value={monthValue}
              onChange={changeMyMonth}
            />
          </div>
          <div style={{ minWidth: '70px' }}>
            <Select
              options={yearData}
              styles={customStyles}
              value={yearValue}
              onChange={changeMyYear}
            />
          </div>
        </div>
      </div>
    );
  }

  
  function changeMyYearMonth(month: Date) {
    setMySelectionOfMonth(month);
  }

  const handleMyCustomDayClick = (day: Date) => {
    setMySelectionOfDay(day);
    setCustomDate(day);
  };

  const onCalendarFocusChange = (focusedInput: FocusedInputShape | null) => {
    setFocusState(focusedInput);
    setMyDatePickerFocus(true);
  };

  const handleDefocus = () => {
    setFocusState(null);
    setMyDatePickerFocus(false);
  };

  const handleCalendarFocus = () => {
    setMyDatePickerFocus(true);
  };


  return (
    <div>
      
      {(focusState || focusDatePicker) && (
        <div>
          <DayPicker
            onDayClick={handleMyCustomDayClick}
            month={selectedMonth}
            className={dateFocusClass}
            fromMonth={fromMonth}
            toMonth={toMonth}
            selectedDays={selectedDay}
            canChangeMonth={false}
            onFocus={handleCalendarFocus}
            captionElement={({ date, localeUtils }) => (
              <MyCustomCalendar date={date} localeUtils={localeUtils} onChange={changeMyYearMonth} />
            )}
          />
        </div>
      )}
    </div>
  );
};

export default MyCustomDatePicker;

Answer 1

You can either try wrapping your element in a div and clicking it (pretty sure it won't work, but you can try), or clicking one of the custom components you made should have the same effect.

However, what you seem to have here is more of a layout issue and I would personally try to solve that. Maybe give your day picker component more space wherever it is on the page so it doesn't have to jitter like that. Perhaps if you showed the layout of the page where you use it, maybe I could offer some ideas.