PDA

View Full Version : [FIXED] searchfield not showing "Search" button on iOS keyboard. Bug?



robl
19 Oct 2011, 11:24 AM
I have a FormPanel with a searchfield but it doesn't display a "Search" button on the iOS keyboard. Bug?



Ext.application({
name: 'Sencha',


launch: function() {
Ext.create("Ext.Panel", {
fullscreen: true,
layout: 'fit',
items: [
{
xtype: 'panel',
layout: 'fit',

items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'test'
},
{
xtype: 'formpanel',
items: [
{
xtype: 'searchfield',
name : 'name',
label: 'Name'
},
{
xtype: 'searchfield',
name : 'email',
label: 'Email'
}
]
}
]
}
]
});
}
});

robl
19 Oct 2011, 11:41 AM
FYI - iOS will display the "Search" button if the input type = "search". I can't get this to work using the Sencha Touch 2.x searchfield.

Source:
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/InputTypes.html

robl
19 Oct 2011, 12:46 PM
The strange thing is if I create a plain HTML file (using ST CSS but NOT loading ST javascript) using the input element that ST 2 created, it seems to work. i.e. The "Search" button is displayed.


<!DOCTYPE html>
<html>
<head>
<link href="../../resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form>
<input id="ext-element-19" class="x-input-el x-form-field x-input-search" type="search" name="name"/>
</form>
</body>
</html>

robl
19 Oct 2011, 3:14 PM
Another observation:

The KitchenSink example in 2.0 (User Inteface->Forms->Toolbars) also fails to display the "Search" button. HOWEVER, the KitchenSink demo on sencha.com (ostensibly using ST 1.x) does display it. I think this is a regression bug.

robl
20 Oct 2011, 6:40 AM
Below is a simpler example of the problem. Assuming that the problem is not in my code, is there a small hack/fix that I can make to the sencha-touch-all-debug.js script to fix this?



Ext.application({
name: 'Search Field Problem',


launch: function() {
Ext.create("Ext.form.Panel", {
fullscreen: true,
layout: 'vbox',
items: [
{
xtype: 'searchfield',
name: 'name',
label: 'Name'
},
{
xtype: 'searchfield',
name: 'email',
label: 'Email'
}
]
});
}
});

robl
20 Oct 2011, 7:24 AM
Sencha Touch 2.0.0-PR1 Kitchen Sink
28762

Sencha Touch Kitchen Sink 1.1.0

28763

John2011
9 Dec 2011, 4:33 AM
I have run into the same issue. After inspecting the DOM I see that the element is set as <input type="search"> so I don't understand why the search button does not appear.

robl
9 Dec 2011, 7:43 AM
Can someone from Sencha please respond and file a bug (or move this to the bug forum) for this?

rdougan
9 Dec 2011, 11:08 AM
Thanks for the report.

rdougan
10 Jan 2012, 4:50 PM
This was because Ext.form.Panel was not wrapped in a <form> tag.

dobie_
17 Feb 2012, 3:37 PM
Is this fixed in ST2-beta3? I'm still having this issue on iOS in beta3, presumably because there is no <form> around the search input.

edit: nevermind, I didn't realize the search field needs to be part of a form panel. That's kind of annoying when I have the search field in a toolbar. I'll have to do some restructuring...

I wish there was a built-in way to wrap the searchinput with a a simple <form> tag, cause putting it in a formpanel adds a bunch of styling that I don't want.

For now I'm just running this jquery code on document ready:



$('input[type=search]').wrap('<form />');

jimmy.honeycutt
25 Jun 2012, 8:26 AM
Hi everyone! We're running into this issue as well. Do not want to wrap the search field in a form panel, as we are using most of our search in the toolbar. If we wrap in a form panel, this wrecks our styling. Is there any other option? Since it is a "Search" field, shouldn't the keyboard recognize it as a search?

Neil Brennan
2 Mar 2013, 4:39 AM
Hi,

If you take a look at the search list component example in an iphone (or simulator):

http://dev.sencha.com/deploy/touch/examples/production/list-search/index.html

42148

you'll see no "search" button, just a "return" one.

Is there a way to fix the example (it IS using a searchfield), has the bug recurred, or did it never really go away?

Thanks for your help,

Nello

mitchellsimoens
2 Mar 2013, 8:27 AM
You have to have the searchfield within a form to see the search button.

Neil Brennan
2 Mar 2013, 3:58 PM
Thanks for the response, but from my reading of this thread that was the whole point of the problem.

If you read above, people are even using JQuery to add form tags around the searchfield just to get the "Search" button to come up.

I'm in the same situation as the other people who don't want form panel styling but do want a search button. My example, and the others in this thread, all look pretty clear to me.

It doesn't look like this bug is fixed at all.

Neil Brennan
5 Mar 2013, 1:43 PM
So, can I take it this will remain broken and I will need to add JQuery to my project to get it to work properly on an iPhone?

mitchellsimoens
5 Mar 2013, 1:57 PM
Absolutely no reason to use jQuery, just need to learn a way to do it with ST2:


Ext.define('MySearchFieldNestedInAForm', {
extend : 'Ext.field.Search',
xtype : 'mysearchfieldnestedinaform',

getElementConfig : function() {
var tpl = this.callParent();

tpl.tag = 'form';

return tpl;
}
});

The issue is what if someone wants a Search field within a form panel? Then you have a <form> within a <form>. So if you need it, use the above.

Neil Brennan
7 Mar 2013, 2:43 AM
Thanks, I'll give that a go!

Neil Brennan
10 Mar 2013, 5:07 AM
Hi,

Your suggestion worked perfectly in terms of creating a 'Search' button, but seems to have added some unexpected complications. When the searchfield was not in a form, pressing 'enter' kept me on the same page and I could process the key press as I liked. Now, I get a form submission, a re-rendering of the page and nothing to process in my app.

I presume that I need to capture the keypress in some way, but the documentation isn't exactly clear on this kind of thing, to me anyway. I have found references via google to 'enableKeyEvents', and in the Touch doco to an 'action' event, but neither of these seems to do anything in my code.

Sigh. All this to get a 'Search' button...

Neil

mitchellsimoens
10 Mar 2013, 10:31 AM
Simple addition:


Ext.define('MySearchFieldNestedInAForm', {
extend : 'Ext.field.Search',
xtype : 'mysearchfieldnestedinaform',

getElementConfig : function () {
var tpl = this.callParent();

tpl.tag = 'form';
tpl.onsubmit = 'return false;';

return tpl;
}
});

Now when the <form> tries to submit, the return false; will cancel it always.

Neil Brennan
10 Mar 2013, 4:37 PM
Thanks, I really don't know how I would have approached this without your help.

Is there a place I should be reading about things like this? I haven't found the available documentation to be particularly friendly, especially if you're trying to step outside the framework at all.

Cheers,

Neil

mitchellsimoens
10 Mar 2013, 8:00 PM
To be honest the getElementConfig method is quite advanced but is a great tool for doing custom things.