DLynch has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/350423 )
Change subject: MenuSelectWidget: scroll to the top if filtering and no exact
match
......................................................................
MenuSelectWidget: scroll to the top if filtering and no exact match
Also, make it so filtering doesn't ignore the first keypress into the input.
Bug: T163536
Change-Id: Ib42bf0b9578c45b43b83cb7d8990f3001b5689b5
---
M demos/pages/widgets.js
M src/widgets/MenuSelectWidget.js
2 files changed, 47 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/23/350423/1
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 27aa493..15d3839 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1306,6 +1306,44 @@
new OO.ui.FieldLayout(
new OO.ui.ComboBoxInputWidget( {
options: [
+ { data: 'asd', label:
'A Label for asd' },
+ { data: 'fgh', label:
'A Label for fgh' },
+ { data: 'jkl', label:
'A Label for jkl' },
+ { data: 'zxc', label:
'A Label for zxc' },
+ { data: 'vbn', label:
'A Label for vbn' },
+ { data: 'asd', label:
'B Label for asd' },
+ { data: 'fgh', label:
'B Label for fgh' },
+ { data: 'jkl', label:
'B Label for jkl' },
+ { data: 'zxc', label:
'B Label for zxc' },
+ { data: 'vbn', label:
'B Label for vbn' },
+ { data: 'asd', label:
'C Label for asd' },
+ { data: 'fgh', label:
'C Label for fgh' },
+ { data: 'jkl', label:
'C Label for jkl' },
+ { data: 'zxc', label:
'C Label for zxc' },
+ { data: 'vbn', label:
'C Label for vbn' },
+ { data: 'asd', label:
'D Label for asd' },
+ { data: 'fgh', label:
'D Label for fgh' },
+ { data: 'jkl', label:
'D Label for jkl' },
+ { data: 'zxc', label:
'D Label for zxc' },
+ { data: 'vbn', label:
'D Label for vbn' },
+ { data: 'asd', label:
'E Label for asd' },
+ { data: 'fgh', label:
'E Label for fgh' },
+ { data: 'jkl', label:
'E Label for jkl' },
+ { data: 'zxc', label:
'E Label for zxc' },
+ { data: 'vbn', label:
'E Label for vbn' }
+ ],
+ menu: {
+ filterFromInput: true
+ }
+ } ),
+ {
+ label: 'ComboBoxInputWidget
(filtering on input)',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.ComboBoxInputWidget( {
+ options: [
{ data: 'Option 1' },
{ data: 'Option 2' },
{ data: 'Option 3' },
diff --git a/src/widgets/MenuSelectWidget.js b/src/widgets/MenuSelectWidget.js
index 8533f96..9d81adc 100644
--- a/src/widgets/MenuSelectWidget.js
+++ b/src/widgets/MenuSelectWidget.js
@@ -147,7 +147,9 @@
anyVisible = false,
len = this.items.length,
showAll = !this.isVisible(),
- filter = showAll ? null : this.getItemMatcher(
this.$input.val() );
+ filter = showAll ? null : this.getItemMatcher(
this.$input.val() ),
+ exactFilter = this.getItemMatcher( this.$input.val(), true ),
+ exactMatch = false;
// Hide non-matching options, and also hide section headers if all
options
// in their section are hidden.
@@ -162,6 +164,7 @@
sectionEmpty = true;
} else if ( item instanceof OO.ui.OptionWidget ) {
visible = showAll || filter( item );
+ exactMatch = exactMatch || exactFilter( item );
anyVisible = anyVisible || visible;
sectionEmpty = sectionEmpty && !visible;
item.toggle( visible );
@@ -175,6 +178,10 @@
// Process the final section
if ( section ) {
section.toggle( showAll || !sectionEmpty );
+ }
+
+ if ( anyVisible && this.items.length && !exactMatch ) {
+ this.scrollItemIntoView( this.items[ 0 ] );
}
this.$element.toggleClass( 'oo-ui-menuSelectWidget-invisible',
!anyVisible );
@@ -212,6 +219,7 @@
if ( this.$input ) {
if ( this.filterFromInput ) {
this.$input.on( 'keydown mouseup cut paste change input
select', this.onInputEditHandler );
+ this.updateItemVisibility();
}
} else {
OO.ui.MenuSelectWidget.parent.prototype.bindKeyPressListener.call( this );
--
To view, visit https://gerrit.wikimedia.org/r/350423
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib42bf0b9578c45b43b83cb7d8990f3001b5689b5
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: DLynch <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
