This repository has been archived by the owner on Jan 3, 2024. It is now read-only.
OcSelect: add support for showing default values #1634
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dschmidt
force-pushed
the
work/select_defaultValue
branch
from
2eb371a to
0860c53
Compare
dschmidt
force-pushed
the
work/select_defaultValue
branch
from
0860c53 to
910a002
Compare
|
SonarCloud Quality Gate failed. |
dschmidt
commented
Sep 5, 2021
| <div class="oc-docs-width-medium"> | ||
| <oc-select v-model="selected" :options="['Apple', 'Bannana', 'Orange', 'Pear']" default-value="Orange" /> | ||
| <p> | ||
| Selected: {{ selected === null ? "null" : selected }} |
There was a problem hiding this comment.
Suggested change
| Selected: {{ selected === null ? "null" : selected }} | |
| Selected: {{ selected || "null" }} |
This was referenced Sep 5, 2021
| </template> | ||
| </vue-select> | ||
| <div> | ||
| <label :for="id" v-text="label" /> |
There was a problem hiding this comment.
Suggested change
| <label :for="id" v-text="label" /> | |
| <label :for="id" class="oc-label" v-text="label" /> |
Just checked how the update journey in web would look like and we seem to give all labels this class, which doesn't style anything initially but sometimes is used to target the label for styling
There was a problem hiding this comment.
Makes sense but possibly belongs into the original pr
There was a problem hiding this comment.
True, but that one is merged already (and I somehow ended here without understanding this is not the original ;D my bad, could you include it either way?
dschmidt
commented
Sep 6, 2021
| @@ -128,6 +172,23 @@ export default { | |||
| */ | |||
| this.$emit("search:input", event.target.value) | |||
| }, | |||
| onInput(value) { | |||
| // selecting a value is handled via onOptionSelecting, we just nead to handle clear events here | |||
| return listeners | ||
| }, | ||
| showClearButton() { | ||
| return this.clearButtonEnabled && this.value !== null |
There was a problem hiding this comment.
this.disabled needs to be taken into account.
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
(depends on #1633)
Description
I've added an optional
defaultValueprop toOcSelect.The value provided there is selected when
value === null. When the default value is shown the clear button is hidden because you obviously can't clear the default.It's possible to select the default value which then fires the
inputevent, i.e. a user can override a default value by explicitly setting it.I'm not really happy with the usability of this as it is right now for multiple reasons:
xand then seeing some value is confusingxand then still seeing the same value is even more confusing(when the default was explicitly selected by the user)
OcTextInputandOcTextareaI figured it might be a bit better if we would use a different icon for "reverting to default", e.g. something like the replay icon provided by ODS. Unfortunately vue-select does not seem to provide api to replace the clear button: https://github.com/sagalbot/vue-select/blob/4230bba9349c5e3ba33a4e77a566fe3ff7d2e1c5/src/components/Select.vue#L58
If we decide to somehow display the default outside of the actual select component we need to make sure we respect
labeland possibly other relevant props.We need to decide if we want to settle on
clearButtonEnabledorclearable(...or whatever) as name for this kind of property.vue-selectusesclearable,OcTextInputusesclearButtonEnabled. I'm fine with whatever, although I personally likeclearablea bit better I choseclearButtonEnabledfor not having to introduce a breaking change inOcTextInput...Related Issue
Motivation and Context
I want to show a default value in ownBrander 2.0 if a user hasn't selected a value yet.
It's possible to handle this outside of the OcSelect component, but that's rather cumbersome and dealing with the vue-select events seem a bit brittle, which is why I would prefer to have this solved for once in ODS. With the additional benefit that my code wouldn't depend on vue-select and vue-select could be replaced better (if neccessary one day).
Moreover, this needs to be thought through UX wise and having a solution in ODS would avoid different approaches in different places.
How Has This Been Tested?
Screenshots (if appropriate):
Showing the default:
Default selected explicitly:
Types of changes
Checklist:
Open tasks: