feat: make input-based components open dialog on mobile device #1144

dimovpetar · 2020-01-17T15:59:56Z

Created new ResponsivePopover component, which extends Popover. On desktop devices the behavior is the same as before. On phones a dialog is opened instead of popover. Same events and "opened" state apply.

Affected components:

ui5-input
ui5-select
ui5-combobox
ui5-multi-combobox
ui5-datepicker
ui5-tabcontainer

Fixes #1087

claassistantio · 2020-01-17T16:00:02Z

All committers have signed the CLA.

claassistantio · 2020-01-17T16:00:04Z

Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

… properties

…sive_popover

…vices

… into responsive_popover

ilhan007

ReadOnly inputs can be edited, but should not. (Open the ComboBox page in mobile simulator and find the readonly combo, open it and edit it)

ilhan007

The ComboBox lacks autocompletion, that is present in desktop mode
Active state upon selection is missing in mobile mode

…sive_popover

dimovpetar · 2020-01-31T11:15:27Z

The ComboBox lacks autocompletion, that is present in desktop mode

Active state upon selection is missing in mobile mode

fixed
works ok after merging your change

dimovpetar · 2020-01-31T11:24:36Z

ReadOnly inputs can be edited, but should not. (Open the ComboBox page in mobile simulator and find the readonly combo, open it and edit it)

fixed

outdated

ilhan007 · 2020-02-04T08:15:19Z

packages/main/src/ComboBox.js

@@ -311,13 +325,17 @@ class ComboBox extends UI5Element {

 	_afterClosePopover() {
 		this._iconPressed = false;
+
+		if (isPhone()) {
+			this.blur();


A little odd, what is the reason for "this.blur()", it is being opening again or?

It is to close the device keyboard and prevent focus to stay in the ui5-combobox, so that the user can't write in it. The user should only be able to write in the dialog's input

ilhan007 · 2020-02-04T08:21:46Z

packages/main/src/Input.js

 		this.firstRendering = false;
 	}

+	_afterOpenPopover() {


move next to _afterClosePopover to improve readability.

ilhan007 · 2020-02-04T08:32:37Z

packages/main/src/ResponsivePopover.js

+
+	static async define(...params) {
+		await Promise.all([
+			Dialog.define(),


if it`s one thing to await: "await Dialog.define();" is enough.

outdated

MarekLukacAnodius · 2021-01-26T18:20:34Z

No ResponsivePopover opened after pressing in ui5-input with suggestions. What is a expected behavior ?
Must click outside of input, then click again into input.

https://sap.github.io/ui5-webcomponents/playground/components/Input/
Mobil Tools in Browser Enabled

dimovpetar · 2021-01-27T08:10:32Z

Hello @MarekLukacAnodius ,

The expected behavior is that an input with suggestions would automatically open a dialog on mobile device when tapped. I also noticed some issues, would you please open an issue for that?

Best regards,
Petar

WIP(ui5-responsive-popover): initial implementation

1e1f30c

Fixes #1087

dimovpetar added 18 commits January 17, 2020 18:34

move footer buttons to ui5-responsive-popover and reveal them through…

cc6bd0e

… properties

make MultiComboBox use ResponsivePopover

7e06462

Make DatePicker use ResponsivePopover

28f21d7

fix Input suggestion selection on desktop

81641dc

make header title "Select" translatable text

b345edb

fix Calendar cells' width on mobile

30b0311

delete ResponsivePopover.html

6d1ba1a

add ui5-combobox to InputAlignments.html

1678228

make all inputs open dialog on click event on mobile

9955cab

fix MultiComboBox closing when when there is no matching value on mobile

1333f6a

make TabContainer use ResponsivePopover

f5dba51

fix eslint errors

e34d8c2

make ResponsivePopover get styles of Popover child

4ee74f1

Merge branch 'master' of github.com:SAP/ui5-webcomponents into respon…

f004aa0

…sive_popover

fix issues with ResponsivePopover after moving to static area

78f24b9

extract needed input styles for mobile devices into single file

139683c

rename InputInPopover.css to ResponsivePopoverInput.css

201f636

Merge branch 'master' of github.com:SAP/ui5-webcomponents into respon…

974172c

…sive_popover

dimovpetar requested review from fifoosid and ilhan007 January 28, 2020 07:36

dimovpetar added 4 commits January 28, 2020 11:44

ui5-combobox, ui5-multicombobox - improved initial focus on mobile de…

3984d1c

…vices

fix ui5-multi-combobox suggestions' down state

a7cc29a

remove workaround for ui5-input and fix selection behavior

e6fb842

return workaround for ui5-input on focus out

a13f425

dimovpetar changed the title ~~WIP(ui5-responsive-popover): initial implementation~~ feat: make input-based components open dialog on mobile device Jan 29, 2020

dimovpetar requested a review from vladitasev January 29, 2020 08:50

remove unneeded styles and attributes for input on mobile

f115505

dimovpetar added 7 commits January 29, 2020 13:51

blur inputs on mobile devices after dialog close

f315d6c

make ResponsivePopover extend Popover

4c18d48

make confirm button type "Transparent"

90171af

make ui5-datepicker blur after dialog close on mobile

8f03d7b

make ui5-datepicker blur after dialog close on mobile

c36cf4d

Merge remote-tracking branch 'refs/remotes/origin/responsive_popover'…

8309bb5

… into responsive_popover

add toggle filtering on ui5-multi-combox on mobile

c5c3681

ilhan007 requested changes Jan 30, 2020

View reviewed changes

ilhan007 previously requested changes Jan 30, 2020

View reviewed changes

dimovpetar added 4 commits January 30, 2020 15:36

fix ComboBox autocompletion on phone

12aee11

don't open dialog on click if "readonly" is set

cf56f08

delete properties from ResponsivePopover and use slots

cbf1af3

Merge branch 'master' of github.com:SAP/ui5-webcomponents into respon…

9194d67

…sive_popover

resolve problem with StaticArea getter merging

3cc23fe

ilhan007 previously requested changes Feb 4, 2020

View reviewed changes

dimovpetar added 2 commits February 4, 2020 11:20

adress comments

21add3a

add comments why "blur" is needed after close

c6a8f70

ilhan007 approved these changes Feb 4, 2020

View reviewed changes

ilhan007 merged commit d7b1179 into SAP:master Feb 4, 2020

dimovpetar deleted the responsive_popover branch February 4, 2020 11:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: make input-based components open dialog on mobile device #1144

feat: make input-based components open dialog on mobile device #1144

dimovpetar commented Jan 17, 2020 •

edited

Loading

claassistantio commented Jan 17, 2020 •

edited

Loading

claassistantio commented Jan 17, 2020

ilhan007 left a comment •

edited

Loading

ilhan007 left a comment

dimovpetar commented Jan 31, 2020

dimovpetar commented Jan 31, 2020

ilhan007 Feb 4, 2020 •

edited

Loading

dimovpetar Feb 4, 2020 •

edited

Loading

ilhan007 Feb 4, 2020 •

edited

Loading

dimovpetar Feb 4, 2020

ilhan007 Feb 4, 2020 •

edited

Loading

dimovpetar Feb 4, 2020

MarekLukacAnodius commented Jan 26, 2021

dimovpetar commented Jan 27, 2021

feat: make input-based components open dialog on mobile device #1144

feat: make input-based components open dialog on mobile device #1144

Conversation

dimovpetar commented Jan 17, 2020 • edited Loading

claassistantio commented Jan 17, 2020 • edited Loading

claassistantio commented Jan 17, 2020

ilhan007 left a comment • edited Loading

Choose a reason for hiding this comment

ilhan007 left a comment

Choose a reason for hiding this comment

dimovpetar commented Jan 31, 2020

dimovpetar commented Jan 31, 2020

ilhan007 Feb 4, 2020 • edited Loading

Choose a reason for hiding this comment

dimovpetar Feb 4, 2020 • edited Loading

Choose a reason for hiding this comment

ilhan007 Feb 4, 2020 • edited Loading

Choose a reason for hiding this comment

dimovpetar Feb 4, 2020

Choose a reason for hiding this comment

ilhan007 Feb 4, 2020 • edited Loading

Choose a reason for hiding this comment

dimovpetar Feb 4, 2020

Choose a reason for hiding this comment

MarekLukacAnodius commented Jan 26, 2021

dimovpetar commented Jan 27, 2021

dimovpetar commented Jan 17, 2020 •

edited

Loading

claassistantio commented Jan 17, 2020 •

edited

Loading

ilhan007 left a comment •

edited

Loading

ilhan007 Feb 4, 2020 •

edited

Loading

dimovpetar Feb 4, 2020 •

edited

Loading

ilhan007 Feb 4, 2020 •

edited

Loading

ilhan007 Feb 4, 2020 •

edited

Loading