Resolve "Save button should have a different color on press"
What does this MR do?
This MR fixes an issue where, on Safari, the background-color does not visibly change when the Save Changes button is clicked.
Is this the best you got?
Unfortunately yes: keying the button/s is the only fix that I identified (and thanks @dpisek for a great pairing session on this). We tried various commbinations of waiting for nextTick, setTimeouts (more info on the issue #273270 (comment 454769521)), but in the end, this is what works.
Why does it work?
There seems to be a discrepancy (bug?) in Safari's rendering. Some CSS doesn't get rendered on form submit; it seems to be blocked by a form submission event (which happens here)
Setting the key property of the button, and basing it on the isDisabled state, means that whenever isDisabled changes, the DOM is forced to update.
Note that the button was previously working fine on all supported browsers except Safari. The key approach seems to force Safari to work, too
Screenshots (strongly suggested)
| Before | After |
|---|---|
 |
button-fix |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Related to #273270 (closed)