Calendar missing headers on initial render with Preact

[jwrlee88]

Hello,

I tried using this component with my Preact project and I noticed something odd. When the component using react-available times first renders, it renders like this image (hosted on imgur) http://i.imgur.com/u90KQhM.png

and then, when I resize the window, (e.g., I right click and open the developer console in chrome) it looks like this: http://i.imgur.com/a7Jid5U.png

I don't think it's Preact that's the issue, since Preact is just a lightweight version of React. What I've noticed is that the AvailableWidth prop gets passed down and that's what gets used to set the initial width of the headers. However, I think the problem is that the available width prop gets set to 0 upon initial load.

What is a good way I can fix this / workaround this? I would like the calendar to load fully upon initial render, and not have to have the window resized to make the headers show up.

Thank you in advance!

Here is my code to reproduce:

1. Calendar.js

 import AvailableTimes from 'react-available-times';

class Calendar extends Component {
    render(){
        return(
                <div className="calendar">

                <AvailableTimes
                    className="calendar"
                    weekStartsOn="monday"
                    onChange={(selections) => {
                        selections.forEach(({ start, end }) => {
                            console.log('Start:', start, 'End:', end);
                        })
                    }}
                    onEventsRequested={({ calendarId, start, end, callback }) => {
                        loadMoreEvents(calendarId, start, end).then(callback);
                    }}
                    initialSelections={[
                        { start: new Date(2018, 7, 15, 8, 0), end: new Date(2018, 7, 16, 8, 0) }
                    ]}
                    height={800}
                    recurring={false}
                    availableDays={['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']}
                    availableHourRange={{ start: 7, end: 20 }}
                />
                </div>
        )
    }
}

export default Calendar;

2. Routes.js

export default class Routes extends Component {
  render () {
    return (
      <ConnectedRouter {...this.props}>
        <div>
          <Navbar/>
          <NotificationsContainer/>
          <Switch>
            {/* Public Routes */}
            <Route path='/calendar' component={Calendar}/>
          </Switch>
        </div>
      </ConnectedRouter>
    )
  }
}```

[trotzig]

Interesting! I wonder if setting a width: 100% on the .calendar element would work? Setting the availableWidth prop is delegated to the react-with-available-width package. It will grab the initial width from the parent div (it's more complicated than that but in essence that's how it works).

[trotzig]

As you mentioned, I doubt that this is a Preact issue.

[trotzig]

Setting the availableWidth prop is delegated to the react-with-available-width package.

Scrap that! I thought I had used that package but I was wrong, this is handled in the AvailableTimes component internally. Would you mind adding some trace logs in the setRef function to figure out what availableWidth is being assigned? You can edit node_modules/react-available-times/dist/main.js directly.

[trotzig]

Also, is there a public URL I can look at the component in action myself? If not, no worries.

[jwrlee88]

Thank you for getting back so quickly!

I tried setting a width: 100% to the calendar class in my css, but the same situation still happens..
I added console.log statements in the setRefs function directly.

and these screenshots are the results I get:
http://i.imgur.com/rpNGaKk.png
http://i.imgur.com/K9Ki5tE.png

the console returns 0 as the availableWidth every time...

code:

    value: function setRef(element) {
      if (!element) {
        return;
      }
      this.ref = element;
      this.setState({
        availableWidth: element.offsetWidth
      });
      console.log('the availableWidth is set to: ', this.state.availableWidth);
    }``

[jwrlee88]

Apologies if that wasn't what you wanted, I wasn't sure what you meant by adding tracelogs... I also do not have a public url yet..

[trotzig]

Alright, that's what I wanted. Although you should note that this.state.availableWidth isn't guaranteed to be up to date right after a call to setState. You might be logging the previous value. Try logging element.offsetWidth instead to see what it reports.

If you try setting an explicit width to .calendar, what happens then? You could try this using inline styles:

 <div className="calendar" style={{ width: 400 }}>
   <AvailableTimes  
      ... and some props
    />
 </div>

[jwrlee88]

Hello!
I tried logging element.offsetWidth and the value still remains at 0 and does not change...

I set the width using inline styles like you suggested and the headers still does not appear on initial load... Currently looks like this screenshot: http://i.imgur.com/7Rm6dIE.png

[trotzig]

Interesting. Are you doing server-side rendering by any chance? Also, if you log element.getBoundingClientRect(), what does that give you?

[jwrlee88]

I am not using server-side rendering

And When I log element.getBoundingClientRect(): http://i.imgur.com/KZ1yLBt.png

[trotzig]

Is that with the inline width? I wonder what’s going on here... if you inspect the parent div in the browser, does it also show you a dimension-less element?

[jwrlee88]

Correct, that is with the inline width, the parent div just has a default sizing from fitting in the child component that contains the react-available-times calendar.

I think I made some progress in finding out the issue, actually.

To investigate further since yesterday, I tried using this package on a fresh react app that I made using create-react-app, and I found that in the React project, there was nothing wrong with the package and everything worked as intended out of the box.

To investigate further, I have actually downloaded the source code and made it as a component in my Preact project, (I just had to change some module exports and imports in 3 files and put it under components/react-availble-calendar and it worked the same way). And upon digging into the source code a bit, I noticed that availableWidth is set in the setRef function within Availabletimes.jsx where state.availableWidth is set by the offsetWidth of element, which is using refs.

Preact is known for not supporting Refs out of the box, but if you have Preact-compat installed (which I do), it lets you work with string refs in preact. So I think this could be an issue with Preact and how it handles Refs.

Perhaps you could shine light on your reasoning behind the setRef(element) function? Is there a different way to find the offsetWidth and set that as the availableWidth?

Thanks for your time, I appreciate the help!

[trotzig]

I'm using setRef to grab an initial wrapper width and memoize the wrapper element. The width is then used to make rendering the calendar UI simpler. There are plenty of moving parts and they need to stay in sync. The easiest thing was to pass in the available width directly to components. There are probably ways to avoid this, but it would take quite a bit of refactoring.

You might be on to something with the React/Preact discrepancy, but from my end it looks like the setRef function is doing what it needs to, both in Preact and React.

I'm going to release version 1.2.1 that will allow you to pass in a width prop yourself. While this might not help us get to the root of the issue, it could help you work around your issue.

[trotzig]

Didn't mean to close this issue (github did it for me because I had tagged the issue in a commit).