refactor(ui5-input): replace openPicker method with public property open

[nikoletavnv]

Method openPicker of ui5-input is replaced with public property open

BREAKING CHANGE: Removed openPicker method and replaced it with public property open

Before, the ui5-input suggestions picker could be opened by calling openPicker() :

const input = document.getElementById("exampleID");
input.openPicker();

Now the suggestions picker is opened by setting the open property to true:

const input = document.getElementById("exampleID");
input.open = true;

You can now close the suggestions picker setting the open property to false:

const input = document.getElementById("exampleID");
input.open = false;

When the suggestion picker opens or closes internally, open and close events are fired. You can listen for those events like this:

const input = document.getElementById("exampleID");
input.addEventListener("open", (event) => {});
input.addEventListener("close", (event) => {});

Related to: #8461

[vladitasev]

I know this is still WIP, but adding a public open property in place of the old openPicker method has several implications:

• please document that it's now also possible for the app to close the picker (by setting open=false) while there wasn't a closePicker method before
• open is one of those properties that can be changed by both the app, and by user interaction internally (just like checked for ui5-checkbox f.e.). Therefore it requires a new event to go along with it, f.e. picker-open or similar. When the popover opens due to the user typing, you must fire this event so that the application can update its model, bound to the open property). Otherwise they'd be out of sync. This event should not be preventable

@MapTo0

[simonarangelova]

Method openPicker of ui5-input is replaced with public property open

BREAKING CHANGE: Removed openPicker method and replaced it with public property open

Before, the ui5-input suggestions picker could be opened by calling openPicker() :

const input = document.getElementById("exampleID");
input.openPicker();

Now the suggestions picker is opened by setting the open property to true:

const input = document.getElementById("exampleID");
input.open = true;

You can now close the suggestions picker setting the open property to false:

const input = document.getElementById("exampleID");
input.open = false;

When the suggestion picker opens or closes internally, open and close events are fired. You can listen for those events like this:

const input = document.getElementById("exampleID");
input.addEventListener("open", (event) => {});
input.addEventListener("close", (event) => {});

Related to: #8461

[ndeshev]

2. In the sample "Input with open suggestions on focusin" if I click to open the dialog on mobile I am unable to close it. Even if I filter to show an item and click it, the suggestions are not closed.

I don't have an issue closing the dialog in that example (except that it can not be closed with 'ENTER), but if I choose an item and confirm it, then click again to open the dialog again and write some additional text I get this error: