Floating button onClick issue with Firefox

Topic: Floating button onClick issue with Firefox

Andre Engelbrecht pro asked 6 years ago

Hi, I was just wondering if anyone has encountered this behaviour before, and possibly know how to resolve it?

I have the following button:

<Button data-tip="Add project" tag="a" size="sm" floating color="primary" onClick={() => console.log("test")}>
  <Fa icon="bolt"/>
</Button>

In Firefox I have to double-click for this to work. In Chrome, Opera and Edge it works fine.

What should I make of this?

Anna Morawska staff commented 6 years ago

Hi there, thank you for reporting this bug, we will take a closer look at this. EDIT: Problem solved, it will be changed in next release. Best, Ania

Andre Engelbrecht pro commented 6 years ago

Great stuff, thanks for the feedback. Do you have an ETA for the next release yet?

Anna Morawska staff commented 6 years ago

Hi Andre, next update is scheduled to arrive on Monday. Best, Ania

Andre Engelbrecht pro commented 6 years ago

Hi Anna, today I updated MDBReact in my test project, but I'm still seeing the same issue in Firefox.

Anna Morawska staff commented 6 years ago

Hi, thank you for letting us know. I checked this out and unfortunately, the button component indeed doesn't work as it supposed to. We will try to fix this in the current sprint. Sorry for the inconvenience. Best, Ania

Andre Engelbrecht pro commented 6 years ago

Hi Ania, no problem. How will I know when the next release is out, could you possibly send out a notification? Best regards, André

Anna Morawska staff commented 6 years ago

Hi, next release is going to arrive at 13.08 :) Best, Ania

Andre Engelbrecht pro commented 6 years ago

Hi, so I did the upgrade to the latest version today (just now actually), and it seems that the double-click issue from before has been resolved. However, unfortunately it seems that the fix has cause another issue. If I now click on a normal button, the onClick event fires twice. Example code: console.log("CLICK")} >TEST This logs "CLICK" twice, tested in Chrome and Firefox. Best regards, André

Anna Morawska staff commented 6 years ago

Hi Andre, we had to postpone the release for today, due to holiday in here ;). Please, check out the newest version, it will be out in a few hours. Also, I've noticed that tag="a" may cause the problems. It is recommended to remove it if you don't use this button as anchor tag with href attribute. Best, Ania

Add comment

Anna Morawska staff answered 6 years ago

0 0 Best answer

Hello, we are working right now on this, it's the problem with dependencies. We will try to update our package as soon as possible. Sory for the inconvenience. Best, Ania

Anna Morawska staff commented 6 years ago

It's already fix on dev branch, you can update your package by adding #dev to your mdbreact dependence in package.json. We will update master branch soon

Andre Engelbrecht pro commented 6 years ago

Hi Ania, any further progress to report? Do you perhaps have an ETA for the next release yet? Best regards, André

Anna Morawska staff commented 6 years ago

Hi Andre, next update is scheduled to arrive on 10th September. Best, Ania

Add comment

Andre Engelbrecht pro answered 6 years ago

0 0 Best answer

Hi Ania,

I retried the update today, as you suggested to wait a few hours for the release. All the previous button click issues seem to be resolved now. Thanks to you and your team for the hard work.

Of course there's always a catch, isn't there.
<h4>I can't open any modals after the latest update.</h4>
My modal code looks like this (copied straight for your website's basic example):
<pre><Container>
  <Button color="danger" onClick={this.toggle}>Modal</Button>
  <Modal isOpen={this.state.discardModal} toggle={this.toggle}>
	<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
	<ModalBody>
	  Are you sure you want to discard all changes?
	</ModalBody>
	<ModalFooter>
	  <Button color="secondary" onClick={this.toggle}>Close</Button>{' '}
	  <Button color="primary">Save changes</Button>
	</ModalFooter>
  </Modal>
</Container></pre>
I keep getting the following errors when setting "discardModal" to true:
<pre>Warning: Unknown event handler property `onExited`. It will be ignored.
    in div (created by t)
    in t
    in div (created by t)
    in t warning.js:33
Warning: Received `true` for a non-boolean attribute `in`.

If you want to write it to the DOM, pass a string instead: in="true" or in={value.toString()}.
    in div (created by t)
    in t
    in div (created by t)
    in t</pre>
Please help? I have no idea what's going on here, but this is a major roadblock for my site's development.

Regards,

André

Please insert min. 20 characters.

Hi Ania, I retried the update today, as you suggested to wait a few hours for the release. All the previous button click issues seem to be resolved now. Thanks to you and your team for the hard work. Of course there's always a catch, isn't there.

I can't open any modals after the latest update.

My modal code looks like this (copied straight for your website's basic example):

<Container>
  <Button color="danger" onClick={this.toggle}>Modal</Button>
  <Modal isOpen={this.state.discardModal} toggle={this.toggle}>
	<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
	<ModalBody>
	  Are you sure you want to discard all changes?
	</ModalBody>
	<ModalFooter>
	  <Button color="secondary" onClick={this.toggle}>Close</Button>{' '}
	  <Button color="primary">Save changes</Button>
	</ModalFooter>
  </Modal>
</Container>

I keep getting the following errors when setting "discardModal" to true:

Warning: Unknown event handler property `onExited`. It will be ignored.
    in div (created by t)
    in t
    in div (created by t)
    in t warning.js:33
Warning: Received `true` for a non-boolean attribute `in`.

If you want to write it to the DOM, pass a string instead: in="true" or in={value.toString()}.
    in div (created by t)
    in t
    in div (created by t)
    in t

Please help? I have no idea what's going on here, but this is a major roadblock for my site's development. Regards, André

Andre Engelbrecht pro commented 6 years ago

Is there perhaps a way to revert back to the previous version until this can be resolved?

Andre Engelbrecht pro commented 6 years ago

Upon further investigation, it seems the errors have something to do with the fade-in animation. If I add fade={false} to the Modal deceleration it opens without errors, I'll use this as a work-around until the problem gets resolved.

master@mastersistemas.net pro commented 6 years ago

I am with the same problem, if you find a solution, please inform me.

Andre Engelbrecht pro commented 6 years ago

Hi master@mastersistemas.net, check my previous comment. If you add fade={false} to the declaration, it opens fine. This can at least be a work-around until the issue is resolved. Regards, André

master@mastersistemas.net pro commented 6 years ago

Yes, I applied your solution, but the lack of the modal opening effect makes a lot of difference. I'm going to use it until a definitive solution. Thank you

Andre Engelbrecht pro commented 6 years ago

Absolutely, this is a work-around and definitely not a solution to the problem. Hopefully the MDB devs can fix this asap.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Andre Engelbrecht

Pro User 30Support score
4Questions 4Answers 0Snippets