When you create a Select component with Mode Mapped, you expect that its myselect.value is always one of these values. However, when you choose a value, and then change the list of possible options, the value still stays the same, rather than going to undefined (or empty list for Multiselect). This is especially frustrating since visually, it looks like you haven't selected anything.
In the image you can see a situation where a user is made to believe they have not selected anything, yet when that value is used anywhere it appears as 6.
I don't think this is a bug, as the component value is not constrained to the component's data (whether that's mapped or manual). I think there may be pros and cons of implementing that....
However, I'm sure you've already found workarounds, but the easiest way is to use the myselect.clearValue() method on any component that changes the mapped value of your component, e.g. in your example you would add it in an event handler for your toggle.
If clearValue goes to far, you can use the default value option and a variable that saves user selection and use a js inline snippet to search whether the selectedValur is present in the new data set, otherwise set as null or [ ]
I disagree, in Inspector -> Interaction -> Advanced there is a toggle Allow custom values that is off by default. If it is off, the component should restrict its value to its data source.
& if it doesn't, the component should at least show visually to the user its current value, rather than looking empty. The fact that the component's value and what is shown to the user are different is clearly unwanted.
