React-dates: DayPicker height incorrectly set if element is hidden when rendered

[donaldharvey]

I'm using DateRangePicker, and the container I rendered it in had display:none initially. This meant that when adjustDayPickerHeight() was called, the calculated height was very small. When the container was then shown, the day picker retained this initial height and didn't function correctly.

For now I've just made the component render when the container is shown, but it'd be good if this workaround wasn't necessary :)

[ljharb]

The picker has no way of knowing when the container is suddenly made visible - the proper fix is indeed to only render the picker when it's going to be visible.

[donaldharvey]

Right - but it'd surely be better, if possible, to adjust the height based on the component state and not the DOM, or to find a way to avoid explicitly setting the height altogether?

[ljharb]

I don't know of any way to avoid that browser limitation here.

[jonathanong]

i'm seeing the same issue, but i don't have display: none anywhere. i do use webpack and this is only the dev environment, so i'm thinking my styles aren't being applied until after the component mounts.

however, i noticed that the height is correctly adjusted when clicking prev/next months. could the daterangepicker adjust height when start/end date is selected, i.e. when focusedInput goes from null to non-null?

at render:

after clicking next:

[jonathanong]

let me know if that makes sense, and i'll make a PR!

[majapw]

Hi @jonathanong! That's surprising that you are seeing height issues without display: none anywhere. Can I see your set-up so we can see what the core issue is? I've never seen that without OP's original set-up.

As for the original problem, @donaldharvey I think that maybe once we have some sort of inline-style implementation where we can set the calendar day height and other details as props, we would be able to do the height calculation without reaching into the DOM. Unfortunately, we are not quite there yet.

[jonathanong]

@majapw i'm not sure how to give you my setup without giving you my entire app. this issue does not happen in production as i use webpack with extracttextplugin (i.e. it is written to CSS). if i do not use extracttextplugin, webpack injects styles via javascript and inline blobs, which i think causes the issue.

[infernalmaster]

I have the same issue with webpack. I can produce this issue when I have this in the same file:

import { DateRangePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css'; 

class DateRangePickerWrapper extends Component {

And I think @jonathanong is right. Maybe when css style is imported in js file, it takes some time to apply this css to browser. And DateRangePicker starts render before all it styles are applied.
Little timeout helps to fix that:

setTimeout(() => {
  render(
    <div>
      <DateRangePickerWrapper />
      <Table />
    </div>,
    document.getElementById('root')
  );
}, 1);

[davincho]

Having the same problem: The initial height is like on the screenshot from @jonathanong. I am solving this, defering the rendring of my component using DateRangePicker, like so:

class DateRangeInput {
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        activated: true
      });
    });
  }

  render() {
    <div>
        {this.state.activated && <DateRangePicker />}
    </div>
  }
}

I know it is kind of bad practice setting the state within componentDidMount, but works well as a workaround.

[majapw]

I've been thinking more about this problem, and I think that conceivably using the hidden prop that we introduced along with initialVisibleMonth to set the height right when we're about to show the DayPicker might help to alleviate this issue in the short-term.

[majapw]

This should be fixed in v4.1.1 I think so I'm going to close.

@donaldharvey @jonathanong @infernalmaster @davincho please check it out and let me know if this is not the case!

[davincho]

@majapw yes now everything works smoothly :)

[euvl]

Hey, I am getting the same issue in "15.5.1":

[juliettepretot]

👆 same