yassienw / react-bootstrap-editable Goto Github PK

It seems this commit introduced a bug related to the autoFocus attribute

When an Editable:

• is a textField type, and
• uses mode="popover",

the first time the editable link is clicked, the browser screen will scroll to top. Subsequent opens of the same Editable popover won't do this.

This doesn't happen in version 0.5.1.

When we remove autoFocus from the Input element, this behaviour stops. But generally autoFocus is desirable, so it would be better to understand and cure this behaviour if possible.

It is definitely the autoFocus attribute. Other field types (which don't have autoFocus) are not affected (and they become affected by introducing autoFocus).

Can't figure out the rest, which sucks for me.

Hi, thanks for this library!
I've found a little problem while using it, when I edit a text if I press Enter I would expect the form containing the text field to be submitted without reloading the page.
Is there some configuration that could prevent this?

You can replicate this by visiting the storybook and just pressing Enter inside the text field while in editable mode.

React 16.9 throw warning about javascript URLs in a tags while using bootstrap editable. The support for the javascript URL will be removed in the next major version of react. The issue is in esitable.js file line 181. A quick fix will be much appreciated.

hey can you pls try to add a type time.

Sir I am not able to add placeholder to editable field in my component

Expected behaviour

The ajax function provided to the Editable component should be called once if the validation was successful.

Actual behaviour

The ajax function provided is called twice if the validation was successful.

Steps to reproduce the behaviour

I have setup a storybook based on a fork of V0.8.0 located here: https://github.com/epigenesys/react-bootstrap-editable/tree/storybook

The last story features an Editable component with an ajax function that logs to the console. The following steps detail how to replicate the issue using this code.

1. Checkout the storybook located at https://github.com/epigenesys/react-bootstrap-editable/tree/storybook.
2. Run yarn install.
3. Run yarn run storybook.
4. Navigate to the 'Ajax' story.
5. Open the console in developer tools.
6. Change the value of the Editable and submit.
7. Observe that there are two console messages.

I have attempted to keep the code above as simple as possible to replicate the issue. Please let me know if you have any difficulty replicating the issue.

Current theory as to the nature of the problem

The following is discussing the Editable.js file located here: https://github.com/YassienW/react-bootstrap-editable/blob/01b3fd899829100190956e1358989c5585307688/src/Editable.js

Both lines 108 and 207 add forms with the onFormSubmit function as their onSubmit. Adding console log statements to both of these lines show that they are both being called, which is then calling the ajax function twice. It looks like only one of these forms should have the onSubmit handler set to onFormSubmit.