Search Box is not Mobile Friendly / Accessible

[cancan101]

admin-ui-classic-bundle/public/js/pimcore/object/helpers/gridTabAbstract.js

Lines 315 to 343 in 2462649

	this.searchField = new Ext.form.TextField(
	{
	name: "query",
	width: 200,
	hideLabel: true,
	enableKeyEvents: true,
	value: this.searchFilter,
	triggers: {
	search: {
	weight: 1,
	cls: 'x-form-search-trigger',
	scope: 'this',
	handler: function (field, trigger, e) {
	this.searchQuery(field);
	}.bind(this)
	}
	},
	listeners: {
	"change": function () {
	this.saveColumnConfigButton.show();
	}.bind(this),
	"keydown": function (field, key) {
	if (key.getKey() == key.ENTER) {
	this.searchQuery(field);
	}
	}.bind(this)
	}
	}
	);

should use some combination of:

• https://docs.sencha.com/extjs/6.2.0/modern/Ext.field.Search.html
• type="search"
• enterkeyhint="search"
• inputmode="search"

Otherwise the OS may not show an enter key on mobile.

[fashxp]

would you consider the rest of the admin-ui-classic as mobile friendly? 🤔 😄

[cancan101]

not particularly, but I did notice this even using "Desktop" mode in browser. While the search icon can be clicked, that is non standard behavior.

From an accessibility (even non mobile) standpoint, some of the attributes above would be an improvement.

[fashxp]

not sure we will invest a lot in that regards into admin-ui-classic anymore ... our focus is on studio-ui.