six-language-switcher with SixLanguageSwitcherInput[] renders key and emits value
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 76/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- typescript
- Domain
- frontend
Research direction
Start at the six-language-switcher component and reproduce the custom-output example from the linked documentation using SixLanguageSwitcherInput[] values. Trace how each input's key and value are used for rendering and for the six-language-switcher-change event. Done means the switcher displays “French” while the event detail is “FR”, with the documented custom-language example still working.
Written by the indexing model from the issue text.
Description
Six Webcomponents version
5
Steps to reproduce
Create a six-language-switcher with custom languages of type SixLanguageSwitcherInput[].
Example taken from https://six-group.github.io/six-webcomponents/v5/components/six-language-switcher.html#custom-output
<div style="margin-top: 1rem">
<span style="font-weight: bold">selected language: </span><span id="selected-language-custom-output">nothing selected</span>
</div>
<script type="module">
const languageSwitcher = document.getElementById('custom-output');
const selectedLanguage = document.getElementById('selected-language-custom-output');
languageSwitcher.languages = [
{ key: 'FR', value: 'French' },
{ key: 'IT', value: 'Italian' },
{ key: 'DE', value: 'German' },
];
languageSwitcher.addEventListener('six-language-switcher-change', (event) => {
const { detail } = event;
selectedLanguage.innerText = detail;
});
</script>
What is expected?
- Should render "French"
- Should emit event with "FR"
What is actually happening?
- Renders "FR"
- Emits event with "French"
System Info
System:
OS: Windows 11 10.0.26100
CPU: (22) x64 Intel(R) Core(TM) Ultra 7 165H
Memory: 24.71 GB / 63.43 GB
Binaries:
Node: 24.16.0 - C:\develop\bin\node24\node.EXE
npm: 11.13.0 - C:\develop\bin\node24\npm.CMD
Browsers:
Chrome: 152.0.7977.55
Edge: Chromium (151.0.4129.101)
Firefox: 154.0 - C:\Program Files\Mozilla Firefox\firefox.exe
Internet Explorer: 11.0.26100.8115
Any additional comments?
No response
- Dominant language
- TypeScript
- Stars
- 30
- Forks
- 13
- Avg merge
- 3h 8m
- Merged PRs (30d)
- 1
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from six-group/six-webcomponents
-
Difficulty 3/5 1-2 days Newbie friendliness 68/100
six-group/six-webcomponents#574 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 48/100
six-group/six-webcomponents#553 ·
-
Difficulty 4/5 3-5 days Newbie friendliness 55/100
six-group/six-webcomponents#533 ·
-
Dependency Dashboard Open
Difficulty 5/5 Over a week Newbie friendliness 15/100
six-group/six-webcomponents#501 ·
-
Design for "divider" Open
Difficulty 2/5 1-3 hours Newbie friendliness 55/100
six-group/six-webcomponents#494 ·
All issues in six-group/six-webcomponents
Similar issues
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 95/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100