[form-single-select] Invalid example foucs and safari browser issue fixes

packages/terra-form-select/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+* Fixed
+  * Fixed focus issue of Invalid example `form-single-select`.
+  * Fixed safari browser minimised issue in `form-single-select` .
+
 ## Unreleased
 
 ## 6.46.0 - (August 25, 2023)

packages/terra-form-select/src/clinical-lowlight-theme/Frame.module.scss

@@ -36,7 +36,7 @@
     --terra-form-select-invalid-box-shadow: 0 0 0 1px #fb4c4c;
     --terra-form-select-invalid-focus-background-size: 0 0;
     --terra-form-select-invalid-focus-border-color: #fb4c4c;
-    --terra-form-select-invalid-focus-box-shadow: 0 0 0 1px #fb4c4c, 0 0 0 1px #fb4c4c;
+    --terra-form-select-invalid-focus-box-shadow: 0 0 0 2px #fb4c4c;
     --terra-form-select-invalid-hover-border-color: #fb4c4c;
     --terra-form-select-arrow-height: 0.715rem;
     --terra-form-select-arrow-width: 1rem;

packages/terra-form-select/src/shared/_Frame.module.scss

@@ -96,6 +96,7 @@
     &.is-invalid.is-focused {
       background-size: var(--terra-form-select-invalid-focus-background-size, 0 0);
       border-color: var(--terra-form-select-invalid-focus-border-color, #e50000);
+      box-shadow: var(--terra-form-select-invalid-focus-box-shadow, 0 0 0 2px #e50000);
     }
 
     &.is-invalid:hover {

packages/terra-form-select/src/single/Frame.jsx

@@ -244,7 +244,11 @@ class Frame extends React.Component {
     } else if (keyCode === KeyCode.KEY_UP || keyCode === KeyCode.KEY_DOWN) {
       event.preventDefault();
       this.openDropdown();
-    } else if (keyCode === KeyCode.KEY_ESCAPE || (this.state.isOpen && keyCode === KeyCode.KEY_TAB)) {
+    } else if (keyCode === KeyCode.KEY_ESCAPE) {
+      event.preventDefault();
+      this.select.focus();
+      this.closeDropdown();
+    } else if (this.state.isOpen && keyCode === KeyCode.KEY_TAB) {
       this.select.focus();
       this.closeDropdown();
     }

packages/terra-form-select/tests/wdio/select-spec.js

@@ -2376,6 +2376,8 @@ Terra.describeViewports('Select', ['tiny'], () => {
       browser.url('/raw/tests/cerner-terra-core-docs/form-select/invalid-default');
 
       Terra.validates.element('invalid default');
+      browser.keys('Tab');
+      Terra.validates.element('invalid default focused');
     });
   });