Skip to content

Commit

Permalink
original keenuiselect with overflows removed from kmodal
Browse files Browse the repository at this point in the history
  • Loading branch information
@thanksameeelian
thanksameeelian committed Feb 28, 2023
1 parent 1e93df2 commit 1775d54
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 94 deletions.
2 changes: 0 additions & 2 deletions lib/KModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,6 @@
top: 50%;
left: 50%;
margin: 0 auto;
overflow-y: auto;
border-radius: $radius;
transform: translate(-50%, -50%);
Expand Down Expand Up @@ -396,7 +395,6 @@
.content {
padding: 0 24px;
overflow-x: hidden;
}
.scroll-shadow {
Expand Down
146 changes: 54 additions & 92 deletions lib/KSelect/KeenUiSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
:class="$computedClass({ ':focus': $coreOutline })"
:tabindex="disabled ? null : '0'"

@click="toggleDropdown"
@focus="onFocus"
@keydown.enter.prevent="openDropdown"
@keydown.space.prevent="openDropdown"
Expand Down Expand Up @@ -74,18 +75,11 @@
/>
</div>

<UiPopover
ref="dropdown"
class="ui-select-dropdown"

:zIndex="202"

@close="onClose"
@open="onOpen"
>
<transition name="ui-select-transition-fade">
<div
ref="dropdownContent"
class="ui-select-dropdown-content"
v-show="showDropdown"
ref="dropdown"
class="ui-select-dropdown"
:style="{ color: $themeTokens.primary, backgroundColor: $themeTokens.surface, bottom: dropdownButtonBottom }"
tabindex="-1"
@keydown.enter.prevent.stop="selectHighlighted"
Expand Down Expand Up @@ -172,7 +166,7 @@
</div>
</ul>
</div>
</UiPopover>
</transition>
</div>

<div v-if="hasFeedback" class="ui-select-feedback">
Expand Down Expand Up @@ -200,7 +194,6 @@
import startswith from 'lodash/startsWith';
import sortby from 'lodash/sortBy';
import UiIcon from '../keen/UiIcon';
import UiPopover from '../keen/UiPopover';
import { looseIndexOf, looseEqual } from '../keen/helpers/util';
import { scrollIntoView, resetScroll } from '../keen/helpers/element-scroll';
Expand All @@ -211,7 +204,6 @@
name: 'KeenUiSelect',
components: {
UiIcon,
UiPopover,
KeenUiSelectOption,
},
props: {
Expand Down Expand Up @@ -327,6 +319,7 @@
isActive: false,
isTouched: false,
highlightedOption: null,
showDropdown: false,
initialValue: JSON.stringify(this.value),
quickMatchString: '',
quickMatchTimeout: null,
Expand Down Expand Up @@ -470,6 +463,7 @@
option[this.keys.label].toLowerCase(),
this.quickMatchString.toLowerCase()
);
return option;
});
},
Expand Down Expand Up @@ -506,6 +500,16 @@
resetScroll(this.$refs.optionsList);
},
showDropdown() {
if (this.showDropdown) {
this.onOpen();
this.$emit('dropdown-open');
} else {
this.onClose();
this.$emit('dropdown-close');
}
},
query() {
this.$emit('query-change', this.query);
},
Expand All @@ -530,7 +534,7 @@
},
mounted() {
this.addExternalClickListener(this.$el, this.onExternalClick);
document.addEventListener('click', this.onExternalClick);
// Find nearest scrollable ancestor
this.scrollableAncestor = this.$el;
while (
Expand All @@ -551,29 +555,10 @@
},
beforeDestroy() {
this.removeExternalClickListener();
document.removeEventListener('click', this.onExternalClick);
},
methods: {
addExternalClickListener(element = this.$el, callback = null) {
this.externalClickListener = e => {
if (!element.contains(e.target)) {
if (typeof callback === 'function') {
callback(e);
} else {
this.$emit('external-click', e);
}
}
};
document.addEventListener('click', this.externalClickListener);
},
removeExternalClickListener() {
document.removeEventListener('click', this.externalClickListener);
this.externalClickListener = null;
},
setValue(value) {
value = value ? value : this.multiple ? [] : '';
Expand Down Expand Up @@ -758,6 +743,11 @@
this.query = '';
},
toggleDropdown() {
this.calculateSpaceBelow();
this[this.showDropdown ? 'closeDropdown' : 'openDropdown']();
},
openDropdown() {
if (this.disabled || this.clearableState) {
return;
Expand All @@ -767,7 +757,7 @@
this.highlightNextOption();
}
this.$refs.dropdown.open();
this.showDropdown = true;
// IE: clicking label doesn't focus the select element
// to set isActive to true
if (!this.isActive) {
Expand All @@ -776,7 +766,7 @@
},
closeDropdown(options = { autoBlur: false }) {
this.$refs.dropdown.close();
this.showDropdown = false;
this.query = '';
if (!this.isTouched) {
this.isTouched = true;
Expand All @@ -790,35 +780,8 @@
}
},
// !!!!!!!!!!!!!!! functionality lost due to refactoring when updating this file to align with
// changes KeenUI's made to their source code to fix "dropdown getting stuck inside modal" problem -- KeenUi also
// refactored their UiPopover, adding in a new JS dropdown library and a couple related dependencies. i wanted to
// avoid expanding the scope of this PR and its testing so did not make the same changes to our vendored UiPopover,
// concerned about unintended effects on our other components that use our current version of UiPopover.
// i have attempted to take what we need from KeenUI's update to UiSelect and accomplish the rest through
// additional functions & CSS targeting. the dropdown now extends beyond the modal as desired but you cannot tab
// through it and it does not highlight upon mouseover (though that specifically could be solved with CSS :hover
// targeting, it doesn't address the underlying loss of functionality)
//
// each time i end up in a tangle...some highlights (lowlights haha):
// - with unintended side effects leading to behavior of dropdown closing upon highlight;
// - unsuccessfully attempted to adapt functionality from KDropdownMenu where UiPopover is ostensibly working with
// highlight functions [rather than CSS targeting of :hover] & tabbing through options;
//
// - this onMouseover function is "working" and mouseovers are registering, still not providing desired
// highlight-upon-hover functionality;
//
// - CSS targeting of each element on :hover in KeenUiSelectOption solves highlight-upon-hover issue on surface
// level but does not address inability to tab through options and simply disguises broken functionality underneath).
//
// have tried to clean up most attempts since they were muddying the waters 🫠
onMouseover(option) {
if (this.$refs.dropdown.isOpen()) {
if (this.showDropdown) {
this.highlightOption(option, { autoScroll: false });
}
},
Expand All @@ -836,20 +799,15 @@
this.isActive = false;
this.$emit('blur', e);
if (this.$refs.dropdown.isOpen()) {
if (this.showDropdown) {
this.closeDropdown({ autoBlur: true });
}
},
onOpen() {
document.addEventListener('scroll', this.onExternalScroll, true);
this.$emit('dropdown-open');
this.$refs.dropdown.$el.style.width = this.$refs.label.getBoundingClientRect().width + 'px';
this.highlightedOption = this.multiple ? null : this.value;
this.$nextTick(() => {
this.$refs[this.hasSearch ? 'searchInput' : 'dropdownContent'].focus();
this.$refs[this.hasSearch ? 'searchInput' : 'dropdown'].focus();
const selectedOption = this.$refs.optionsList.querySelector('.is-selected');
if (selectedOption) {
this.scrollOptionIntoView(selectedOption);
Expand All @@ -862,24 +820,16 @@
},
onClose() {
document.removeEventListener('scroll', this.onExternalScroll, true);
this.highlightedOption = this.multiple ? null : this.value;
this.$emit('dropdown-close');
},
onExternalClick() {
if (this.$refs.dropdown.isOpen()) {
this.closeDropdown({ autoBlur: true });
} else if (this.isActive) {
this.isActive = false;
}
},
onExternalScroll(e) {
if (e.target !== this.$refs.optionsList) {
this.closeDropdown();
onExternalClick(e) {
if (!this.$el.contains(e.target)) {
if (this.showDropdown) {
this.closeDropdown({ autoBlur: true });
} else if (this.isActive) {
this.isActive = false;
}
}
},
Expand All @@ -903,7 +853,6 @@
resetTouched(options = { touched: false }) {
this.isTouched = options.touched;
},
calculateSpaceBelow() {
// Get the height of element
const buttonHeight = this.$el.getBoundingClientRect().height;
Expand Down Expand Up @@ -1049,6 +998,7 @@
}
.ui-select-label {
position: relative;
display: block;
width: 100%;
padding: 0;
Expand Down Expand Up @@ -1122,6 +1072,7 @@
.ui-select-dropdown {
position: absolute;
z-index: $z-index-dropdown;
display: block;
width: 100%;
min-width: rem-calc(180px);
Expand All @@ -1130,10 +1081,7 @@
margin-bottom: rem-calc(8px);
list-style-type: none;
outline: none;
}
.ui-select-dropdown-content {
outline: none;
box-shadow: 1px 2px 8px $md-grey-600;
}
.ui-select-search-input {
Expand Down Expand Up @@ -1222,6 +1170,20 @@
}
}
// ================================================
// Transitions
// ================================================
.ui-select-transition-fade-enter-active,
.ui-select-transition-fade-leave-active {
transition: opacity 0.2s ease;
}
.ui-select-transition-fade-enter,
.ui-select-transition-fade-leave-active {
opacity: 0;
}
/* stylelint-enable */
.overlay-close-button {
Expand Down

0 comments on commit 1775d54

Please sign in to comment.