fix(ui5-multi-combobox): docs and API improvements (#438)

- suggestion module is no longer needed to run the component - documentation with keyboard handling is updated - sample page responsiveness is improved
SAP · May 23, 2019 · c559ac0 · c559ac0
1 parent 64985b2
commit c559ac0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
@@ -5,7 +5,6 @@
 		?disabled={{ctr.disabled}}
 		?readonly={{ctr.readonly}}
 		value-state="{{ctr.valueState}}"
-		show-suggestions
 		@ui5-input="{{ctr._inputLiveChange}}"
 		@ui5-change={{ctr._inputChange}}
 		@keydown="{{ctr._keydown}}">

diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -192,6 +192,18 @@ const metadata = {
  * <li> Drop-down arrow - expands\collapses the option list.</li>
  * <li> Option list - the list of available options.</li>
  * </ul>
+ * <h3>Keyboard handling</h3>
+ *
+ * <h4>Tokens</h2>
+ * <ul>
+ * <li> Left/Right arrow keys - moves the focus selection form the currently focues token to the previous/next one (if available). </li>
+ * <li> Delete -  deletes the token and focuses the previous token. </li>
+ * <li> Backspace -  deletes the token and focus the next token. </li>
+ * </ul>
+ *
+ * <h4>Picker</h3>
+ * Alt + arrow down or F4 - opens the picker.
+ *
  *
  * @constructor
  * @author SAP SE
@@ -327,10 +339,12 @@ class MultiComboBox extends UI5Element {
 
 	_handleKeyDown(event) {
 		if (isShow(event) && !this.readonly && !this.disabled) {
+			event.preventDefault();
 			this._togglePopover();
 		}
 
 		if (isDown(event) && this._getPopover()._isOpen && this.items.length) {
+			event.preventDefault();
 			const list = this.shadowRoot.querySelector(".ui5-multi-combobox-all-items-list");
 			list._itemNavigation.current = 0;
 			list.items[0].focus();

diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/MultiComboBox.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/MultiComboBox.sample.html
@@ -3,7 +3,8 @@
 
 <head>
 	<title>&lt;ui5-multi-combobox&gt;</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no>
+
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
 
@@ -31,7 +32,8 @@
 	</script>
 	<style>
 		.snippet ui5-multi-combobox {
-			width: 320px;
+			flex: 1;
+			min-width: 240px;
 			margin: 0 8px 8px 0;
 		}
 
@@ -53,7 +55,7 @@ <h2 class="control-header">MultiComboBox</h2>
 
 	<section>
 		<h3>Basic MultiComboBox</h3>
-		<div class="snippet">
+		<div class="snippet" style="display: flex; flex-wrap: wrap;">
 			<ui5-multi-combobox placeholder="Type your value">
 				<ui5-li selected>UI5</ui5-li>
 			</ui5-multi-combobox>
@@ -82,7 +84,7 @@ <h3>Basic MultiComboBox</h3>
 	<section>
 		<h3>MultiComboBox with items</h3>
 		<div class="snippet">
-			<ui5-multi-combobox style="width: 540px" placeholder="Choose your countries">
+			<ui5-multi-combobox style="width: 100%" placeholder="Choose your countries">
 				<ui5-li selected>Argentina</ui5-li>
 				<ui5-li>Bulgaria</ui5-li>
 				<ui5-li>Denmark</ui5-li>
@@ -114,7 +116,7 @@ <h3>MultiComboBox with items</h3>
 	<section>
 		<h3>MultiComboBox with items and build-in user input validation</h3>
 		<div class="snippet">
-			<ui5-multi-combobox style="width: 540px" validate-input placeholder="Choose your countries">
+			<ui5-multi-combobox style="width: 100%" validate-input placeholder="Choose your countries">
 				<ui5-li>Argentina</ui5-li>
 				<ui5-li selected>Bulgaria</ui5-li>
 				<ui5-li>Denmark</ui5-li>
@@ -146,7 +148,7 @@ <h3>MultiComboBox with items and build-in user input validation</h3>
 
 	<section>
 			<h3>MultiComboBox with Value State</h3>
-			<div class="snippet">
+			<div class="snippet" style="display: flex; flex-wrap: wrap;">
 				<ui5-multi-combobox value-state="Success">
 					<ui5-li>Fortune</ui5-li>
 					<ui5-li>Luck</ui5-li>