0
145
ViewsReact select input value is not resetting on page refresh
FWIW, I'm using Gatsby deployed with AWS Amplify.
I have a simple language switcher on my website. When I open the site in a new tab, or in private browsing, the behavior is as expected. It currently defaults to english and you can switch to German. However when I just do a simple refresh, the translatable text on the page goes back to english, while what's shown in the select is "German". What's most curious, however, is that inspecting the select looks like the attached picture. While on the page it shows German selected, in the HTML the English option has selected="". Which is correct, but why does it show German?
const changeLanguage = (lang) => {
i18n.changeLanguage(lang);
};
...
<select
value={i18n.language}
onChange={(event) => changeLanguage(event.target.value)}
2 answers
Answer question0
Have you been encountering this behaviour testing on Firefox? I had the same problem on my Gatsby app, and it turns out to be a Firefox bug, since this behaviour doesn't happen on Chrome (I didn't test on other browsers).
Setting autocomplete="off" on your select tag as noted in this other answer should fix the issue.
0
Would need to see the rest of your <select> component to know what other props you're setting and how you're populating the <option>'s. However, are you setting the selected prop to the correct <option> when populating the children?
Also, there is no value attribute for the <select> element (Select Attributes). If you're using a library, you should reference their docs. Otherwise, with straight HTML you need to set the selected <option> when populating the <option>'s.
const languages = ['english', 'german'];
const changeLanguage = (lang) => {
i18n.changeLanguage(lang);
};
...
<select
// value={i18n.language} - there is no `value` prop for `select` element
onChange={(event) => changeLanguage(event.target.value)}
...
>
{languages.map((language) => (
<option value={language} selected={language === i18n.language} />
))}
</select>
Update
@a.mola See the similar question asked here value attribute on <select> tag not selecting default option
Additionally, here's a working example of a <select> element with the value in the <select> vs selected on the <option>: