🐛 fix(bal-footer): LanguageSelection consistent cursor/behavior (#1397)

* Create PR for #1388 * chore(setup): add npmrc to gitignore * fix(footer): make language selection in footer consistent (#1388) * fix(footer): make language selection in footer consistent (#1388) --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Yannick Holzenkamp <[email protected]>
baloise · May 16, 2024 · d865fe3 · d865fe3
1 parent f30975e
commit d865fe3
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 0 deletions.
diff --git a/.changeset/quiet-timers-rest.md b/.changeset/quiet-timers-rest.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**footer**: make language selection in footer consistent (#1388)
diff --git a/.gitignore b/.gitignore
@@ -37,6 +37,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+.npmrc
 
 # System Files
 .DS_Store

diff --git a/packages/core/src/components/bal-footer/bal-footer.sass b/packages/core/src/components/bal-footer/bal-footer.sass
@@ -47,6 +47,9 @@
           flex-wrap: nowrap
           align-items: center
 
+          bal-icon, .input
+            cursor: pointer
+
           &:hover
             bal-icon
               +fillSvg(var(--bal-footer-language-background-hover))

diff --git a/packages/core/src/components/bal-footer/bal-footer.tsx b/packages/core/src/components/bal-footer/bal-footer.tsx
@@ -12,12 +12,15 @@ import {
 import { BEM } from '../../utils/bem'
 import { Loggable, Logger, LogInstance } from '../../utils/log'
 import { rIC } from '../../utils/helpers'
+import { stopEventBubbling } from '../../utils/form-input'
 
 @Component({
   tag: 'bal-footer',
   styleUrl: 'bal-footer.sass',
 })
 export class Footer implements BalConfigObserver, Loggable {
+  private selectEl: HTMLBalSelectElement | undefined
+
   @State() links: FooterLink[] = []
   @State() socialMediaLinks: SocialMediaLink[] = []
   @State() language: BalLanguage = defaultConfig.language
@@ -179,8 +182,13 @@ export class Footer implements BalConfigObserver, Loggable {
                       }}
                       name="web"
                       color="white"
+                      onClick={el => {
+                        stopEventBubbling(el)
+                        this.selectEl?.open()
+                      }}
                     ></bal-icon>
                     <bal-select
+                      ref={el => (this.selectEl = el as HTMLBalSelectElement)}
                       value={this.language}
                       onBalChange={event => this.changeLanguage(event.detail as any)}
                       data-testid="bal-footer-language"