Skip to content

Commit

Permalink
fix(ui5-input): focus is handled properly (#2670)
Browse files Browse the repository at this point in the history
  • Loading branch information
niyap committed Jan 22, 2021
1 parent b36e54e commit 2c033aa
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 5 deletions.
6 changes: 1 addition & 5 deletions packages/main/src/Input.js
Original file line number Diff line number Diff line change
Expand Up @@ -654,11 +654,7 @@ class Input extends UI5Element {
}

async _onfocusin(event) {
const inputDomRef = await this.getInputDOMRef();

if (event.target !== inputDomRef) {
return;
}
await this.getInputDOMRef();

this.focused = true; // invalidating property
this.previousValue = this.value;
Expand Down
11 changes: 11 additions & 0 deletions packages/main/src/MultiInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,17 @@ class MultiInput extends Input {
}
}

/**
* @override
*/
async _onfocusin(event) {
const inputDomRef = await this.getInputDOMRef();

if (event.target === inputDomRef) {
await super._onfocusin(event);
}
}

shouldOpenSuggestions() {
const parent = super.shouldOpenSuggestions();
const valueHelpPressed = this._valueHelpIconPressed;
Expand Down
15 changes: 15 additions & 0 deletions packages/main/test/pages/Input.html
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,22 @@ <h3>Test width of suggestions popover</h3>
<ui5-li>Argentinaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</ui5-li>
</ui5-input>

<h3>Input in a Dialog</h3>
<ui5-button id="btnOpenDialog">Open Dialog</ui5-button>
<ui5-dialog id="dialog">
<ui5-input id="inputInDialog" show-suggestions style="width: 100%">
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li type="Inactive">Inactive Compact</ui5-li>
<ui5-li type="Inactive">Inactive Condensed</ui5-li>
</ui5-input>
</ui5-dialog>

<script>
btnOpenDialog.addEventListener("click", function () {
dialog.open();
});
var sap_database_entries = [{ key: "A", text: "A" }, { key: "Afg", text: "Afghanistan" }, { key: "Arg", text: "Argentina" }, { key: "Alb", text: "Albania" }, { key: "Arm", text: "Armenia" }, { key: "Alg", text: "Algeria" }, { key: "And", text: "Andorra" }, { key: "Ang", text: "Angola" }, { key: "Ast", text: "Austria" }, { key: "Aus", text: "Australia" }, { key: "Aze", text: "Azerbaijan" }, { key: "Aruba", text: "Aruba" }, { key: "Antigua", text: "Antigua and Barbuda" }, { key: "B", text: "B" }, { key: "Bel", text: "Belarus" }, { key: "Bel", text: "Belgium" }, { key: "Bg", text: "Bulgaria" }, { key: "Bra", text: "Brazil" }, { key: "C", text: "C" }, { key: "Ch", text: "China" }, { key: "Cub", text: "Cuba" }, { key: "Chil", text: "Chili" }, { key: "L", text: "L" }, { key: "Lat", text: "Latvia" }, { key: "Lit", text: "Litva" }, { key: "P", text: "P" }, { key: "Prt", text: "Portugal" }, { key: "S", text: "S" }, { key: "Sen", text: "Senegal" }, { key: "Ser", text: "Serbia" }, { key: "Sey", text: "Seychelles" }, { key: "Sierra", text: "Sierra Leone" }, { key: "Sgp", text: "Singapore" }, { key: "Sint", text: "Sint Maarten" }, { key: "Slv", text: "Slovakia" }, { key: "Slo", text: "Slovenia" }];

var input = document.getElementById('myInput');
Expand Down
15 changes: 15 additions & 0 deletions packages/main/test/specs/Input.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -371,4 +371,19 @@ describe("Input general interaction", () => {
assert.notOk(inputPopover.isDisplayedInViewport(), "The inpuit popover is closed as it lost the focus.");
assert.ok(helpPopover.isDisplayedInViewport(), "The help popover remains open as the focus is within.");
});

it("Should open suggestions popover when ui5-input is the first focusable element within a dialog", () => {
browser.url("http://localhost:8080/test-resources/pages/Input.html");
const input = $("#inputInDialog");
const button = browser.$("#btnOpenDialog");

//act
button.click();

const staticAreaItemClassName = browser.getStaticAreaItemClassName("#inputInDialog");
const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");

//assert
assert.ok(popover.isDisplayedInViewport(), "The popover is visible");
});
});

0 comments on commit 2c033aa

Please sign in to comment.