React-bootstrap Dropdown not compatible

[saxicek]

When using React-bootstrap component Dropdown it goes to children and from the property bsRole it distinguishes menu component and toggle component - see https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Dropdown.js#L310.

When this is evaluated by React, child components have bsRole property populated and Dropdown registers subcomponents properly.

When Preact evaluates the same code, child nodes do not have properties populated and therefore subcomponent registration (toggle and menu) does not work.

This seems to be related to how Preact is optimized so not sure if this behavior can be changed?

To replicate the issue you can just create-react-app with following App.js:

import React, { Component } from 'react';
import './App.css';
import Dropdown from 'react-bootstrap/lib/Dropdown';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Dropdown className="" id="dropdown-test">
          <Dropdown.Toggle useAnchor={true}
                           // bsRole="toggle"
                           className="">Dropdown test</Dropdown.Toggle>
          <Dropdown.Menu
            className="menu-item-dropdown"
            // bsRole="menu"
          >
            <li>First item</li>
            <li>Second item</li>
          </Dropdown.Menu>
        </Dropdown>
      </div>
    );
  }
}

export default App;

[developit]

Hmm - that's a little odd - it seems like the props should already be populated at that point since they are assigned when the VNodes are created. Perhaps this is an issue with defaultProps?

[saxicek]

Yes, Dropdown.Menu has the required bsRole property declared in defaultProps.

[developit]

Ah, alright I can probably resolve those in createElement then.

[benkaiser]

This seems to still be an open issue. Using preact-compat@3.16.0 and preact@8.1.0 and react-bootstrap@0.31.0 when using a DropdownButton with MenuItems underneath it, the button renders, but then on click the title disappears from the button and the dropdown menu doesn't open.

import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import MenuItem from 'react-bootstrap/lib/MenuItem';

...
render() {
  return (
            <DropdownButton title='Options' id='PlaylistOptions'>
              <MenuItem onClick={this.onDelete}>Delete playlist</MenuItem>
              <MenuItem onClick={this.onRename}>Rename playlist</MenuItem>
            </DropdownButton>
  );
}
...

Documentation for DropdownButton: https://react-bootstrap.github.io/components.html#btn-dropdowns

[linsolas]

Hello @benkaiser

I confirm that I still have the issue on my side. The #306 issue is related to that point, but unfortunately, I fear that there is no progress on a possible resolution. I will try to investigate on my side...