Improve text input handling

[trmdi]

• Indicate to the user more clearly when the Unsplash collection is actually changed and show the submit button only when needed.
• Allow to reset the collection by leaving the input empty.

Fix #494

[victrme]

We'll keep putting the last value in the placeholder so that the user can keep track to what value is currently used.

We can keep the values in the inputs when the user submits the form, and set the new placeholder.

[trmdi]

The value of the text input is already indicates the last set collection.

What happen when the input is empty? It's also a valid collection value meaning the default one.
So I think the placeholder, which is displayed only when the input is empty, should only display something like "Bonjourr" to mean when the input is empty, it is the default collection.
What do you think?

[victrme]

The value does not match the current collection if the user changes the input, which is why the placeholder must be the last selected collection.

If the user empties the form, the placeholder will be the default collection ID. Here:

Bonjourr/src/scripts/features/backgrounds/unsplash.ts

Lines 23 to 28 in f3bcb88

	const bonjourrCollections = {
	noon: 'GD4aOSg4yQE',
	day: 'o8uX55RbBPs',
	evening: '3M2rKTckZaQ',
	night: 'bHDh4Ae7O8o',
	}

[trmdi]

When the input is not empty, the placeholder is not displayed. Why does it need to be set to the latest one?

When the input is empty, I know it will be set to the default one. But the default is an array, which one should it be? Or we need to show only a meanful name to the user as I said above, just "Bonjourr" ?

[victrme]

The input can be emptied by the user before submitting the form. If the user forgets what the current value is, it can be a problem!

which one should it be

I guess for now the default collection can be bonjourrCollections.day. It cannot be a simple "Bonjourr", because a placeholder is supposed to show an example of data the user can input. See this: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder#accessibility_concerns

[trmdi]

The input can be emptied by the user before submitting the form. If the user forgets what the current value is, it can be a problem!

I don't think so. That input is mostly used to change the collection. If he wants to keep it, he can simply don't submit the form, or ctrl+z, or refresh the page...

You're right about the usage of the placeholder. But according to the MDN link, we shouldn't use it for displaying the current collection.

[victrme]

The placeholder is a way to make sure we know at all times what the current collection is. I don't want a user to refresh the page because he forgot what the collection was...

Also MDN is warning against using the placeholder as a label, but any valid value the user submit is a good placeholder ☝️🤓

[victrme]

Otherwise your PR looks good to me !