Skip to content

Commit

Permalink
Fixed #2957 - MultiSelect: Scroll to focused item on select
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Oct 20, 2022
1 parent 7ccc244 commit 3da8cf2
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 13 deletions.
8 changes: 4 additions & 4 deletions src/components/autocomplete/AutoComplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,12 +136,12 @@
</template>

<script>
import { ConnectedOverlayScrollHandler, UniqueComponentId, ObjectUtils, DomHandler, ZIndexUtils } from 'primevue/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import Button from 'primevue/button';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple';
import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
import VirtualScroller from 'primevue/virtualscroller';
import Portal from 'primevue/portal';
export default {
name: 'AutoComplete',
Expand Down Expand Up @@ -406,7 +406,7 @@ export default {
this.dirty = true;
this.focused = true;
this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
this.overlayVisible && this.scrollInView(this.focusedOptionIndex);
this.$emit('focus', event);
},
Expand Down
8 changes: 4 additions & 4 deletions src/components/dropdown/Dropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,12 +136,12 @@
</template>

<script>
import { ConnectedOverlayScrollHandler, ObjectUtils, DomHandler, ZIndexUtils, UniqueComponentId } from 'primevue/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import { FilterService } from 'primevue/api';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple';
import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
import VirtualScroller from 'primevue/virtualscroller';
import Portal from 'primevue/portal';
export default {
name: 'Dropdown',
Expand Down Expand Up @@ -398,7 +398,7 @@ export default {
},
onFocus(event) {
this.focused = true;
this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
this.overlayVisible && this.scrollInView(this.focusedOptionIndex);
this.$emit('focus', event);
},
Expand Down
10 changes: 5 additions & 5 deletions src/components/multiselect/MultiSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,12 +146,12 @@
</template>

<script>
import { ConnectedOverlayScrollHandler, UniqueComponentId, ObjectUtils, DomHandler, ZIndexUtils } from 'primevue/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import { FilterService } from 'primevue/api';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple';
import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
import VirtualScroller from 'primevue/virtualscroller';
import Portal from 'primevue/portal';
export default {
name: 'MultiSelect',
Expand Down Expand Up @@ -407,7 +407,7 @@ export default {
},
onFocus(event) {
this.focused = true;
this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;

This comment has been minimized.

Sign in to view

Copy link
@viotile

viotile Jun 8, 2024 •
edited
Loading

In first condition we have to check for "autoOptionFocus" as well else autoOptionFocus = false prop won't work.
Ie.
I have pre-selected some value in multiselect and I don't wan't to scroll to specifc option so I have set autoOptionFocus option to false but it won't due to first condition it will always scroll to last selected option.
this.overlayVisible && this.scrollInView(this.focusedOptionIndex);
this.$emit('focus', event);
},
Expand Down Expand Up @@ -526,8 +526,8 @@ export default {
else value = [...(this.modelValue || []), this.getOptionValue(option)];
this.updateModel(event, value);
isFocus && DomHandler.focus(this.$refs.focusInput);
index !== -1 && (this.focusedOptionIndex = index);
isFocus && DomHandler.focus(this.$refs.focusInput);
},
onOptionMouseMove(event, index) {
if (this.focusOnHover) {
Expand Down

0 comments on commit 3da8cf2

Please sign in to comment.