Clicking cancel in saved query save modal doesn't close it

[flash1293]

Kibana version: master

Describe the bug: When clicking cancel in the saved query modal, the modal isn't closed and an error message is shown about title being a mandatory field.

Steps to reproduce:

1. Go to discover
2. Open saved query popover
3. Click save
4. Click cancel in modal
5. Modal stays open

Expected behavior:

Modal should close right away

Screenshots (if relevant):

Any additional context:

Nothing major, but probably a "good first issue"

[elasticmachine]

Pinging @elastic/kibana-app-arch (Team:AppArch)

[VladLasitsa]

@cchaos, @flash1293
I investigated this issue and found out the following:

• the problem appeared after these changes (applying validation by blur event on the input instead of input changes): Save query form validation on blur #43726
• validation that is triggered on the blur event on the input (actually any click outside the input including click on the Cancel button) leads to the rerender of the modal window and showing the error message. This message increases the height of the modal window because of this the click doesn't fall on the "Cancel" button (button moves below).
  

I found some places where validation applies by input changes (creating an index pattern, creating a pipeline).

As you can see here nothing prevents the user from further entering characters, he just sees the problem right away.
I think the application should be consistent. In the same scenarios, we should have the same validation behavior.

From my point of view, we can return the previous behavior and triggers validation every change in input and disable the save button if validation is failed. It will lead to fix this bug because when a user clicks on the "Cancel" button the validation will not be triggered and the height of the window will not be increased. Therefore, the click correctly hits the button.

What do you think about it?

[cchaos]

The PR description explains really well the reason for validating on blur:

This could lead to the errors flashing in the user's face before they're done typing a valid input. For example, we allow spaces in the name field, but not at the beginning or end of the name. So if a user typed this is a long name with spaces they would see the error pop up every time they type a space, only to have it disappear when they type the next letter.

I don't think going back to validating as they type is acceptable for this particular form. Instead I think there are two solutions:

1. The form should just auto-strip the trailing spaces on submit and not warn the user. This is what most forms around the web do.
2. The React component should use hooks/memo to not re-render the entire modal when the onBlur event occurs.