Trouble with trying to append Dropdown Component to document.body

[jonShare]

Hi - great work Alex!

Have come across an issue where I need the input component in a container that has it's overflow set to hidden, so will need to escape that container and render the dropdown to the body in order for everything to display correctly.

Was looking into react-tether to provide the magic for this, however RT requires two child elements, the second of which is pulled out of it's current container and appended to the document's body. The way your dropdowns currently work, seems to have everything nested within the dropdown component.

Any way to decouple this, or are you aware of another way around this?

Thanks,

Jon

[alexkuz]

I think you can use onRenderList prop for that (see https://github.com/alexkuz/react-input-enhancements/blob/master/src/Dropdown.jsx#L94). Instead of returning element, you can save parameters to a state and then render it with react-tether.
(maybe onRenderList should actually receive raw data rather than rendered elements, but this should work too, I guess)

[jonShare]

Thanks for the prompt reply!

I'll give that a whirl. :)

[jonShare]

OK... anyone else struggling with this. This seemed to work. By updating the render method of the InputPopup component;

return (
      <TetherComponent
        attachment="top left"
        targetAttachment="bottom left"
        constraints={[{
          to: 'scrollParent',
          attachment: 'together'
        }]}
      >
        <div {...styling('inputEnhancementsPopupWrapper')}
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}
             {...inputPopupProps}>
              {this.renderInput(styling, restProps)}
              {onRenderCaret(styling, isActive, hover, caret)}
        </div>
        {
          isActive &&
            onRenderPopup(styling, isActive, popupShown)
        }
      </TetherComponent>
    );

[jonShare]

Hi again Alex,

That all worked well, but have now got an interesting problem, in that now they're separated the onBlur and onFocus events don't work as initially intended. Obviously now that they're no longer in the scope of one single focusable/blur-able element...

I'm a React beginner and can't think of a way around this. Any ideas?