react-tether: renderTarget not getting rendered on server in SSR

Hello, I’m using TetherComponent in an SSR environment and I noticed, when I turned JS off to see my server rendered page, that the renderTarget prop and the items its taking are not rendered on the server. Is there a reason for this? I looked at the source and can’t seem to figure out why it wouldn’t be, but maybe I’m missing something. Here is my code, in case it helps, but I imagine that you’d be able to duplicate this without my code since there isn’t anything special about it (plus my code is obviously tailored to the project, but maybe you can spot something in it that I’m missing):

<TetherComponent
    key={tetherKey}
    className={tetherClasses}
    attachment="top left"
    targetAttachment="bottom left"
    constraints={[
        {
            to: 'window',
            pin: true
        }
    ]}
    renderTarget={ref => {
        return (
            <span ref={ref}>
                <TextInput
                    ref={node => { this._textInput = node; }}
                    name={name}
                    disabled={disabled}
                    defaultValue={selectedDate}
                    onFocus={this._onInputFocus}
                    icon={(useIcon)
                        ? <Icon name="calendar" />
                        : null
                    }
                    iconPosition="right"
                    autoFocus={autoFocus}
                    focus={focus}
                    placeholder={placeholder}
                    readOnly
                />
            </span>
        );
    }}
    renderElement={ref => {
        return showCalendar && (
            <DatePickerCalendar
                ref={ref}
                className={calendarClassName}
                onChange={this._onDateChange}
                selectedDate={this.state.selectedDate}
                disablePast={disablePast}
                disableBefore={disableBefore}
                disableAfter={disableAfter}
                overrideInitialMonthWithSelected={overrideInitialMonthWithSelected}
            />
        );
    }}
/>

This all works fine in the browser, by the way, and there is nothing special about TextInput, its just a wrapper for input to add some additional styling for our core UI components look and feel.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 15 (13 by maintainers)

Most upvoted comments

Unit tests for the win. I got my question answered as to what would be broken by doing this and was able to circumvent it with the fixes in the PR. It’s now updated and the tests pass as they should.

FYI i’m looking into the test errors right now on that PR.