Use containerMenu as a base for HintMenu instead of regular menu
Change-Id: Ic1ed2e216a9c61aabf1f1cac41972b1a4e96a91a
diff --git a/dev/js/src/hint/menu.js b/dev/js/src/hint/menu.js
index 89f1d10..ecd0b51 100644
--- a/dev/js/src/hint/menu.js
+++ b/dev/js/src/hint/menu.js
@@ -5,12 +5,12 @@
"use strict";
define([
- 'menu',
+ 'containermenu',
'hint/item',
'hint/prefix',
'hint/lengthField'
], function (
- menuClass,
+ containerMenuClass,
itemClass,
prefixClass,
lengthFieldClass) {
@@ -21,13 +21,11 @@
* Create new hint helper menu.
*/
create : function (hint, context, params) {
- const obj = Object.create(menuClass)
- .upgradeTo(this)
- ._init(params, {
- itemClass : itemClass,
- prefixClass : prefixClass,
- lengthFieldClass : lengthFieldClass
- });
+ const obj = containerMenuClass.create(params, {
+ itemClass : itemClass,
+ prefixClass : prefixClass,
+ lengthFieldClass : lengthFieldClass})
+ .upgradeTo(this);
obj._context = context;
obj._el.classList.add('hint');
obj._hint = hint;
@@ -38,6 +36,27 @@
obj.element().addEventListener('blur', function (e) {
this.menu.hide(); // WithoutDestruction();
});
+ // Fix the containeritems not being clickable. Add this to the containers element.
+ obj.container().element().addEventListener("mousedown", function (e) {
+ // see https://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event
+ e.preventDefault();
+ // It used to be, that clicking on a item within the container (see container.js) would cause the container to gain focus
+ // thanks to mousedown default behaviour, which would mean the actual menu (ul menu roll containermenu hint) would not be in focus (I think? containermenu ul is its child
+ // afterall?). This would cause blur to be called, which (see hint/menu.js) would hide the current menu and its container, causing click to target a location
+ // the containeritem USED to be.
+ //https://w3c.github.io/uievents/#event-type-mousedown
+ //These default actions are thus not supported anymore.
+
+ }.bind(obj));
+ obj.container().element().addEventListener("click", function (e) {
+ this.reset("");
+ this.element().blur();
+ this.hint().unshow(); //hide the containermenu, not with hide but with blur, because blur would usually happen in default mousedown behaviour
+ e.halt(); // Question: my impression is that this click event handler is called after all the others and thus this should be absolutely no problem.
+ // Are we sure there are no things that do not happen now thanks to this?
+
+ //by default, click focuses its target. Maybe that is why e.halt() is necessary? (https://w3c.github.io/uievents/#event-type-click)
+ }.bind(obj));
// Focus on input field on hide
obj.onHide = function () {
@@ -60,6 +79,14 @@
*/
hint : function () {
return this._hint;
- }
+ },
+
+ /**
+ * Reset the prefix, inputField and hide the menu. Called by hint/item.
+ */
+ reset : function (action) {
+ this.prefix("");
+ this.hint().inputField().insert(action).update();
+ },
};
});