为 airbnb SingleDatePicker 制作下拉选择器日期

Question

I've got my setup like this, I'm absolutely squeezing the limits of what is possible from outside a library:

const [customDate, setCustomDate] = useState(moment());
const [focused, setFocused] = useState(false);)
const onDropDownChangeMonth = ()=>{
    setCustomDate(moment('07-12-2020', dateFormat.MM_DD_YYYY));
    setFocused(true);
}

    <SingleDatePicker
              date={customDate}
              onDateChange={onDateChange}
              focused={focused}
              placeholder={props.placeholder}
              onFocusChange={(e) => {
                setFocused(e.focused); 
              }}
              navPrev={<div></div>}
              navNext={<div></div>}
              keepFocusOnInput={true}
              renderMonthText={() => (
                <div style={{ display: 'flex', flexDirection: 'row' }}>
                  <select style={{ border: 'none', background: '#ffffff' }} onChange={onDropDownChangeMonth}>
                    <option>January</option>
                    <option>February</option>
                    <option>March</option>
                    <option>April</option>
                    <option>May</option>
                    <option>June</option>
                    <option>July</option>
                    <option>August</option>
                    <option>September</option>
                    <option>October</option>
                    <option>November</option>
                    <option>December</option>
                  </select>
                </div>
              )}
            />  

so, my current implementation gives me correct result like this:

Since, this would re-render, I wanted to keep it open(I can bear the flicker), the date changes, the calendar changes,the calendar stays open, but, the children they render blank:

Only when I manually defocus, and reopen then the calendar gets rendered, and I see the changes reflected. How do I get the calendar rendered? How to make it so that I don't have to manually defocus it, I don't mind the flicker.

BTW: I'm using the SingleDatePicker by airbnb

Answer 1

Well, this is a possible solution for anyone who doesn't mind a blink instead of a flicker (please read the question above). It's a hacky solution, and it doesn't do much good in my case, just noting here for someone who might be okay with this, or someone who knows how to reduce this blink to a flicker or nothing :

put this in the `onDropDownChangeMonth`:   
  
const onDropDownChangeMonth = ()=>{
    setCustomDate(moment('07-12-2020', dateFormat.MM_DD_YYYY));
    setFocused(false);
    setTimeout(()=>setFocused(true), 1);
}  

Even though I put a 1ms timeout, the delay for the re-render is about 1 second, and this is not good in my case. . Please mention anything to reduce or get rid of that delay-for-re-render .