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

[elenastoyanovaa]

1. 

if I am an app and set open=true, but no suggestions are loaded it will currently show an empty popover. I think that we were discussing for one of the input components that we do not want this. Can you research if we have some additional logic in the other inputs regarding this? I am not sure if the discussion was regarding UI5 or the components.

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.

[elenastoyanovaa]

Have you discussed with the central team what will be the behavior in a ui5-input is set to open and it is outside the viewport? Should we add additional comments here explaining the behavior?

[nikoletavnv]

We have discussed that for now this is the expected behavior - if the input is outside the viewport its suggestions picker will be closed, as far as the component fires an event to notify the users that the suggestions picker is closed.

[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:

Comments are applied