Event issues

[Vija02]

Hi there! This library was working great for my project until i stumbled into a problem in the event system. More specifically, i was working with react-bootstrap's DropdownButton.

Here's my test code on react, just a simple page bundled with webpack :

import React from 'react';
import ReactDOM from 'react-dom';
import { DropdownButton, MenuItem } from 'react-bootstrap';

ReactDOM.render(
  React.createElement(
    DropdownButton,
    { bsStyle: "success", title: "Button", key: 0, id: "dropdown-basic-" + 0 },
    React.createElement(
        MenuItem,
        { eventKey: "1" },
        "Menu Item"
    )
  ), document.getElementById('root')
);

For visibility sake, This is the jsx for the rendered component above :

<DropdownButton bsStyle="success" title="Button" key={0} id={`dropdown-basic-${0}`}>
  <MenuItem eventKey="1">Menu Item</MenuItem>
</DropdownButton>

This will show a button that can be clicked to show a dropdown.

Now the problem when I switch to preact and use preact-compat is that clicking the button doesn't show the dropdown menu.

Upon further investigation, it turns out that there's an event listener here that executes this function. On React, this function is not called. On Preact however, the function is called and the dropdown menu is closed immediately after it is opened

I tried to trace the reason behind this but i'm lost when looking at ReactEventListener. Not sure what is causing this behaviour.

[developit]

Is it possible this is because preact doesn't ignore manually fired click events?

[Vija02]

Not sure what difference that makes. I made a demo to show the behavior here: React Preact + preact-compat

[developit]

Thanks, I'll try to diagnose this. Might just be an even timing issue, since you can see the DOM is being mutated (just incorrectly, or reverting) in response to clicks.

[linsolas]

Hello,

Thanks @Vija02 for your demo. An interesting fact is to set a onToggle callback on the Dropdown directly, like:

<ReactBootstrap.DropdownButton bsStyle="success"
    ...
    onToggle={isOpen => { console.log('onToggle:', isOpen); }}>

• With react, it is triggered only once when the click is made on the button, with the isOpen set to true;
• With preact + preact-compat, it is triggered twice, isOpen set to true then to false;

react:

preact:

[linsolas]

Some more information after my current investigations. The event is triggered twice (was not able yet to understand why), so I tried to stop the propagation of the initial event in the onClick callback, like this:

preact.render(
  <ReactBootstrap.DropdownButton bsStyle="success" title="Button" key={0} id={`dropdown-basic-${0}`}
    onClick={(evt) => evt.stopPropagation()}
    >
    <ReactBootstrap.MenuItem eventKey="1">Menu Item</ReactBootstrap.MenuItem>
  </ReactBootstrap.DropdownButton>
, document.getElementById('root')
);

(demo here)

note: of course that's just to better understand the source cause, it's not a real workaround or a suggested fix :smirk:

[uuuchit]

@Vija02 Have you solved it ? @linsolas I have used your comment to solve same issue. Can you suggest real solution .. any updates?

[Vija03]

@uuuchit Sadly, no. I end up using reactstrap instead of react-bootstrap. That solved a lot of problems.

Reactstrap was far less buggy with preact but there are still problems with modals so i end up abandoning preact for now.

Edit: whoops, used wrong account -w-