From ff4c402bfc8ffa94ed7ae96803d391076523bab2 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
Date: Tue, 19 Jul 2022 12:10:11 -0400
Subject: [PATCH] fix(kselect): disabled and readonly states [beta] (#707)
* fix(kselect): disabled and readonly states
* fix: add event type
* fix(kinput): no hover or focus color if input readonly
* fix: remove logs
---
docs/components/select.md | 2 ++
src/components/KInput/KInput.vue | 10 ++++++----
src/components/KSelect/KSelect.vue | 22 ++++++++++++++++++----
src/styles/forms/_inputs.scss | 12 ++++++------
4 files changed, 32 insertions(+), 14 deletions(-)
diff --git a/docs/components/select.md b/docs/components/select.md
index 54a4610146..0b3c8835c1 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -56,11 +56,13 @@ Enable this prop to overlay the label on the input element's border for `select`
+
```html
+
```
### labelAttributes
diff --git a/src/components/KInput/KInput.vue b/src/components/KInput/KInput.vue
index 82a41214de..bfb70bd9cf 100644
--- a/src/components/KInput/KInput.vue
+++ b/src/components/KInput/KInput.vue
@@ -12,7 +12,7 @@
@@ -161,7 +161,8 @@ export default defineComponent({
const modelValueChanged = ref(false) // Determine if the original value was modified by the user
const isFocused = ref(false)
const isHovered = ref(false)
- const isDisabled = computed((): boolean => !!attrs?.disabled)
+ const isDisabled = computed((): boolean => attrs?.disabled !== undefined && String(attrs?.disabled) !== 'false')
+ const isReadonly = computed((): boolean => attrs?.readonly !== undefined && String(attrs?.readonly) !== 'false')
const inputId = computed((): string => attrs.id ? String(attrs.id) : props.testMode ? 'test-input-id-1234' : uuidv1())
// we need this so we can create a watcher for programmatic changes to the modelValue
const value = computed({
@@ -231,6 +232,7 @@ export default defineComponent({
isFocused,
isHovered,
isDisabled,
+ isReadonly,
inputId,
charLimitExceeded,
charLimitExceededError,
@@ -288,8 +290,8 @@ export default defineComponent({
margin-top: 2px;
}
- .text-on-input label.hovered,
- .text-on-input label:hover {
+ .text-on-input label:not(.disabled):not(.readonly).hovered,
+ .text-on-input label:not(.disabled):not(.readonly):hover {
color: var(--KInputHover, var(--blue-500));
}
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index e0100a88c3..468a99629a 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -87,7 +87,7 @@
style="position: relative;"
role="listbox"
@click="evt => {
- if ($attrs.disabled !== undefined && $attrs.disabled !== false) {
+ if ($attrs.disabled !== undefined && String($attrs.disabled) !== 'false') {
evt.stopPropagation()
}
}"
@@ -103,15 +103,15 @@
:id="selectTextId"
v-bind="$attrs"
v-model="filterStr"
- :readonly="!filterIsEnabled"
:is-open="isToggled.value"
:label="label && overlayLabel ? label : undefined"
:overlay-label="overlayLabel"
:placeholder="selectedItem && appearance === 'select' && !filterIsEnabled ? selectedItem.label : placeholderText"
autocomplete="off"
autocapitalize="off"
- :class="{ 'cursor-default': !filterIsEnabled }"
+ :class="{ 'cursor-default prevent-pointer-events': !filterIsEnabled }"
class="k-select-input"
+ @keypress="onInputKeypress"
@keyup="evt => triggerFocus(evt, isToggled)"
/>
@@ -338,7 +338,7 @@ export default defineComponent({
popoverClasses: `${defaultKPopAttributes.popoverClasses} ${props.kpopAttributes.popoverClasses} k-select-pop-${props.appearance}`,
width: String(inputWidth.value),
maxWidth: String(inputWidth.value),
- disabled: typeof attrs.disabled === 'boolean' ? attrs.disabled : false,
+ disabled: (attrs.disabled !== undefined && String(attrs.disabled) !== 'false') || (attrs.readonly !== undefined && String(attrs.readonly) !== 'false'),
}
})
@@ -368,6 +368,14 @@ export default defineComponent({
return placeholderText.value
})
+ const onInputKeypress = (event: Event) => {
+ // If filters are not enabled, ignore any keypresses
+ if (!filterIsEnabled.value) {
+ event.preventDefault()
+ return false
+ }
+ }
+
const handleItemSelect = (item: SelectItem) => {
selectItems.value.forEach(anItem => {
if (anItem.key === item.key) {
@@ -430,6 +438,7 @@ export default defineComponent({
})
const inputWidth = ref(0)
+
onMounted(() => {
const inputElem = document.getElementById(selectInputId.value)
@@ -456,6 +465,7 @@ export default defineComponent({
triggerFocus,
inputWidth,
filterIsEnabled,
+ onInputKeypress,
}
},
})
@@ -532,6 +542,10 @@ export default defineComponent({
cursor: default;
}
+ &.prevent-pointer-events {
+ pointer-events: none;
+ }
+
&input.k-input {
padding: var(--spacing-xs);
height: 100%;
diff --git a/src/styles/forms/_inputs.scss b/src/styles/forms/_inputs.scss
index 66096980cb..96b173b77f 100644
--- a/src/styles/forms/_inputs.scss
+++ b/src/styles/forms/_inputs.scss
@@ -3,23 +3,23 @@
.k-input-wrapper .text-on-input {
position: relative;
- .hovered {
+ .hovered:not(.readonly) {
color: var(--KInputHover, var(--blue-500));
transition: color 0.1s ease;
}
- .focused {
+ .focused:not(.readonly) {
color: var(--KInputFocus, var(--blue-500));
transition: color 0.1s ease;
}
label {
- &.hovered {
+ &.hovered:not(.readonly) {
color: var(--KInputHover, var(--blue-500));
transition: color 0.1s ease;
}
- &.focused {
+ &.focused:not(.readonly) {
color: var(--KInputFocus, var(--blue-500));
transition: color 0.1s ease;
}
@@ -94,7 +94,7 @@
}
}
- &:not([type="checkbox"]):not([type="radio"]):not(.k-select-input):read-only {
+ &:not([type="checkbox"]):not([type="radio"]):read-only {
background-color: var(--KInputReadonlyBackground, var(--grey-100, color(grey-100)));
box-shadow: inset 0 0 0 1px var(--KInputBorder, var(--grey-300)) !important;
}
@@ -125,7 +125,7 @@
}
&[type="search"] {
- padding-left: 36px;
+ padding-left: 36px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23000' fill-opacity='.45' fill-rule='evenodd' d='M6 12c-3.3137085 0-6-2.6862915-6-6s2.6862915-6 6-6 6 2.6862915 6 6c0 1.29583043-.410791 2.49571549-1.1092521 3.47653436l1.2305724 1.23057244 2.8232632 2.8338633c.3897175.3911808.3947266 1.0192147.005164 1.4087774-.3868655.3868655-1.014825.3873148-1.4087774-.005164l-2.8338633-2.8232632-1.23057244-1.2305724C8.49571549 11.589209 7.29583043 12 6 12zm4-6c0-2.209139-1.790861-4-4-4S2 3.790861 2 6s1.790861 4 4 4 4-1.790861 4-4z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 12px 50%;