asked on

Closing Bootstrap Modal after updating form inputs requires two clicks

In bootstrap 4 using a modal dialog there is a problem with the close after clicking cancel or save. The form has a search input that refreshes the values in each input on the modal. If this is used and updates the form then it requires to click the cancel or the save button twice to close. There is also a shift at the bottom of the modal and a gap of white space is added on the first click. The cancel button uses data-dismiss="modal". Is there something that is occurring when the search refreshes the values across the entire form that I may not be doing correctly? Basically on the search click event I simply add the values by using $("#input1").val('new value').

Marco Gasi

Can you post a linkbto the live oage or just create a simple testing page to share with us?

Julian Hansen

As Marco points out - cannot do anything without seeing some code and preferably a link showing the problem.

wee11

ASKER

This is not a public website it is an internal company app which I can not share. So it is simply a open modal with the standard bootstrap modal structure. The form tags are the inputs with the search input being type text with a button using input-group-append. Click on the button triggers the click event which passes to the server the text in the input to query a db. Then the results are used to update the inputs values. $("input1").val('record_value'); . Then the Save button on the form is again a simple click event that saves the values of the inputs. I have taken out one by one the $("input1").val('record_value'). When I have just a couple set the issues goes away but there are about 15 being updated. The more that are updated the bigger the shift down but it is only a 1/4 inch or so shift. It is that simple there is nothing else to the code.

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Marco Gasi

Agree with Julian. We need at least the code which allow us to replicate the issue. But if prepare a test page to replicate the issue, chance are that you discover the solution by yourself )

ASKER CERTIFIED SOLUTION

lenamtl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

wee11

ASKER

So after further testing and trying to think through what is going on I thought it might be a focus issue. So I force focus to one of the input controls. That resolved the issue so I don't know why that would be the cause though. In addition the space at the bottom of the modal form is strange as well. So I verified that between the modal-body and modal footer a quarter inch or more of space gets created when the focus is set on the input. It did the same thing when you had to click twice on the cancel or submit button in the footer. So the first click created the space and the second actually fired the click event on the button for the submit. I stripped down the form and removed all the divs that formatted the modal-body and with just the inputs it reduces the gap but still occurs. I will see if I can create the scenario on bootply when I have a chance. Most likely this weekend.