dojox.mobile.SearchBox does not work properly

Question

I'm using dojox.mobile.SearchBox in Worklight project.

I found out 2 issues.

The first is that the clear button(a small cross in a circle, which must to clear the text in the search box) does not work on the IOS Safari(or in the workilght app which uses safari).

The only thing happens is that the cursor moves to right side of the text are in the search box. That's it. It does not remove the text.

And the second one.

I need to call function by pressing search button on the virtual keybord.

If I set the type="search" in search box - there is no search button on the keybord. So i put my search button into the .

So search button appears on the virtual keybord.

But after the pressing this button, the form submits and I page reloads.

And I just need to call a function.

Answer 1

I've resolved both issues))

1) About event on pressing Search button(enter)

There is an issue in IOS Safari with appearing "Search button" on virtual keybord.

your text input with type="search" must be inside form tag. Show 'Search' button in iPhone/iPad Safari keyboard (second answer)

To call some function on pressing Search button and not submit a form I put the following javascript into the from tag:

<form onsubmit="myFunction(...);return false;">

Pressing Search button starts the Submit action. And this javascript call my function at this time and stop the submitting. That's what I need!

2)

The second problem with clear button of the search box.

This is the bug of dojo. https://bugs.dojotoolkit.org/ticket/16672

I've found a workaround. http://dojo-toolkit.33424.n3.nabble.com/dojox-mobile-SearchBox-Clear-Button-x-fails-in-iPad-iOS-16672-td3995707.html

But I change it a little, cause it does not work in my case.

This is the my variant:

<form onsubmit="myFunction(...);return false;">
            <input id="searchBox" ontouchstart="clearButtonSupport(event);" data-dojo-type="dojox.mobile.SearchBox"
                data-dojo-props="type:'search'" type="search"
                placeholder="Some placeholder...">
        </form>

This is the clearButtonSupport function:

function clearButtonSupport(evt) {
require([ "dijit/registry", "dojox/mobile/SearchBox" ], function(registry) {
    var searchBox = registry.byId('searchBox');

        var rect = document.getElementById('searchBox').getBoundingClientRect();
        // if touched in the right-most 20 pels of the search box
        if (rect.right - evt.touches[0].clientX < 20) {
            evt.preventDefault();
            searchBox.set("value", "");
        }

});

}

onclick and onmouseup event in IOS safari works only when text input is not focused. If the focus on the search box(cursor is inside) this event is not thrown.

So i used ontouchstart event

ontouchstart - multitouch event in IOS safari.

It's thrown every time you touch the element.

So I take the coordinates of the first(and the only) touch. And look if it's less than 20px far away from the right side of the element.()position of the clear button)

And clear the search box.

That's it!