[Search] ESC button breaks Search input

[dreaming-augustin]

When you search for somethings and then press Esc, then you can't search again.
This is a very old bug.
This bug report is basically a duplicate of the following Semantic-UI bug:

[SEARCH] ESC button breaks Search input
Semantic-Org/Semantic-UI#5596

The solution offered there Semantic-Org/Semantic-UI#5596 (comment) is only a hack.

[dreaming-augustin]

I have tracked it down to resultsDismissed being set to false:

                    // search shortcuts
                    if (keyCode === keys.escape) {
                        if (!module.is.visible()) {
                            module.verbose('Escape key pressed, blurring search field');
                            console.log('Escape key pressed, blurring search field');   // module.verbose() 
                                                                                   // does not seem to work, 
                                                                                   // so I use the console.log() 
                                                                                   // for debugging. 
                            $prompt.trigger('blur');
                        } else {
                            module.hideResults();
                            console.log('Escape key pressed, hideResults();');    // same.
                        }
                        event.stopPropagation();
                        //resultsDismissed = true;    // Culprit! Commenting it out solves the problem.
                    }

resultsDismissed is set back to true on blurr, hence why the hack in the previously mentioned comment works...

I am not sure what the original logic works, but the current behaviour is mostly annoying and occurs when it shouldn't.

[dreaming-augustin]

BTW, I checked the documentation, but I couldn't figure out how to turn verbose output on.

        $('#search.search.ui').search({
                type : 'category',
                minCharacters : 2,
                verbose: true,             // <= does not seem to work.
                debug: true,
                silent: false,
                performance: true,   // <= neither does this. I am not sure what it does.
               // ... etc
        });

[dreaming-augustin]

If we comment out resultsDismissed = true;, then I still observe this behaviour:

1. search something.
2. Press Escape (to close the result popup)
3. click again into the search field with the mouse (the original query is still there) => nothing happens.
4. change the field (add a character or delete one or do both) => search fires again.

Maybe 3) was the intended behaviour as search is fired on change only, but in this case, maybe it is not....

[dreaming-augustin]

Dec 30, 2016 commit, exactly 8 years old:
Semantic-Org/Semantic-UI@bfea105

No issue nor any discussion is referenced.
It is labeled an an 'enhancement'... Many would disagree.

[dreaming-augustin]

And the behaviour is not documented at all.

[dreaming-augustin]

                    // search shortcuts
                    if (keyCode === keys.escape) {
                        if (!module.is.visible()) {
                                      // I don't see when this block of code would ever be called...
                                      // if the module is not visible, what does pressing escape accomplish?
                            module.verbose('Escape key pressed, blurring search field');
                            $prompt.trigger('blur');
                        } else {
                            module.hideResults();
                            $prompt.trigger('blur');    // Adding this.
                        }
                        event.stopPropagation();
                        //resultsDismissed = true;   // removing this.
                    }

The above code behaves more like what I would expect, which can be simplified to:

                    // search shortcuts
                    if (keyCode === keys.escape) {
                            module.hideResults();
                            $prompt.trigger('blur'); 
                            event.stopPropagation();
                    }

[dreaming-augustin]

The simple code I just proposed is very much what is happening within the Calendar module:
7deb1ce

[dreaming-augustin]

module.verbose('Escape key pressed, blurring search field');
                            console.log('Escape key pressed, blurring search field');   // module.verbose() 
                                                                                   // does not seem to work, 
                                                                                   // so I use the console.log() 
                                                                                   // for debugging.

Oh! I am a bit slow. I just figured out how module.verbose() works. The results are hidden in a table that is collapsed by default in the console.
If you wish, I could prepare a PR to better document this.