Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hard to select items in IE10 Mobile #76

Closed
vtbassmatt opened this issue Dec 7, 2012 · 52 comments
Closed

Hard to select items in IE10 Mobile #76

vtbassmatt opened this issue Dec 7, 2012 · 52 comments
Labels

Comments

@vtbassmatt
Copy link
Contributor

The dropdown menus are really hard to tap in IE10 Mobile (Windows Phone 8). I have to zoom way in to successfully select an item. At the default zoom using Bootstrap's responsive CSS package, most of my taps are recognized as clicking the label of the field below. Works fine on Mobile Safari (iOS 6).

When I get a chance, I'll create an isolated test case, try to debug, and (if I find a solution) submit a patch. Creating a tracking issue for now.

It may be an interaction between this package and Crispy Forms - I haven't tried without Crispy.

@jpic
Copy link
Member

jpic commented Dec 7, 2012

Is this just a css issue ? Maybe because the css uses px instead of ems ?

On Fri, Dec 7, 2012 at 7:07 AM, Matt Cooper notifications@github.comwrote:

The dropdown menus are really hard to tap in IE10 Mobile (Windows Phone
8). I have to zoom way in to successfully select an item. At the default
zoom using Bootstrap's responsive CSS package, most of my taps are
recognized as clicking the label of the field below. Works fine on Mobile
Safari (iOS 6).

When I get a chance, I'll create an isolated test case, try to debug, and
(if I find a solution) submit a patch. Creating a tracking issue for now.

It may be an interaction between this package and Crispy Forms - I haven't
tried without Crispy.


Reply to this email directly or view it on GitHubhttps://github.com//issues/76.

http://yourlabs.org http://blog.yourlabs.org
Customer is king - Le client est roi - El cliente es rey.

@vtbassmatt
Copy link
Contributor Author

That's a good question, and one I'll investigate first.

@vtbassmatt
Copy link
Contributor Author

I think it's more than a simple CSS fix. When the menu first loads, it's scrolled off the screen (and I can't tell if it's connected to another field or if that's an accident) just below the keyboard. I tried tapping it, but I get the same behavior as before (the tap is recognized on another field). Then when I tap back into the text box that's autocomplete-enabled, the menu pops right back up and is connected to the right field. I don't have more time to investigate tonight - another thing I need to try is testing it in desktop IE.

@jpic
Copy link
Member

jpic commented Dec 8, 2012

Does it work on other mobile browsers ?

@vtbassmatt
Copy link
Contributor Author

I tested on Safari on iOS 6 (iPod Touch) and it worked correctly. I don't have any other mobile devices to test with.

@vtbassmatt
Copy link
Contributor Author

I haven't had any time to debug this - my bad. However, I did get a chance to try in desktop IE 10 and didn't have any troubles. This is good and bad, since it means it's mobile specific (and going to be "fun" to debug).

@jpic
Copy link
Member

jpic commented Dec 14, 2012

If typeahead works in IE10 mobile, then it will be fixed when the "typeahead" branch is merged - probably for django-autocomplete-light 1.2 which can be expected in january.

@vtbassmatt
Copy link
Contributor Author

Wow, debugging on mobile browsers is a mess. I'll work around the issue for now - this isn't critical for me - and check again when typeahead is merged. Thanks!

@vtbassmatt
Copy link
Contributor Author

I just tried the typeahead branch experimentally. It's improved: when I tap the dropdown item, it sometimes selects that item. The menu is still not attached to the original field, and intermittently when I tap the dropdown item, it dismisses the menu without selecting the item (leaving me with a search query in a text box).

@jpic
Copy link
Member

jpic commented Jan 21, 2013

I'm aware that selection of a choice doesn't work in the typeahead branch. It's probably the last major thing to fix in this branch.

Could you try with 1.1.9 ? It has a rewritten keypress handler which might fix your issue.

Thanks

@jpic
Copy link
Member

jpic commented Jan 21, 2013

Also, I just updated the typeahead branch to use django-admin-bootstrapped and it seems like the autocomplete fully works.

Could you try it too please ? Pretty please with a sugar on the top ⛵

@vtbassmatt
Copy link
Contributor Author

Sure, I'll do that tonight and let you know.

On Mon, Jan 21, 2013 at 9:03 AM, James Pic notifications@github.com wrote:

I'm aware that selection of a choice doesn't work in the typeahead branch.
It's probably the last major thing to fix in this branch.

Could you try with 1.1.9 ? It has a rewritten keypress handler which might
fix your issue.

Thanks


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-12506892.

@jpic
Copy link
Member

jpic commented Jan 21, 2013

Actually I've got a problem in typeahead branch: you must either click very fast, either double click on a choice.

Keyboard ENTER works... Anyway, I'm still interrested in your feedback.

@vtbassmatt
Copy link
Contributor Author

I updated to 1.1.9 from PyPI. Most of the bad behavior is fixed, though the
menu still defaults to appearing off the bottom of the screen. Since this
is just a small personal-use project, I'm willing to live with the bug.
Thanks for your help digging into it!

I work at Microsoft and will file a bug against Mobile IE for them to take
a look. I suspect it's some intersection of the CSS + JS I'm using and the
quirks of WebKit vs. Trident.

On Mon, Jan 21, 2013 at 9:58 AM, James Pic notifications@github.com wrote:

Actually I've got a problem in typeahead branch: you must either click
very fast, either double click on a choice.

Keyboard ENTER works... Anyway, I'm still interrested in your feedback.


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-12509505.

@vtbassmatt
Copy link
Contributor Author

Hmm... actually, after I deployed to my public-facing site, now the
autocomplete fields aren't working even in Safari. In the error console, on
page load I get: TypeError: 'undefined' is not a function (evaluating
'$('.autocomplete-light-widget[data-bootstrap=normal]').live')

Thoughts on what's going wrong there?

On Tue, Jan 22, 2013 at 5:20 PM, Matt Cooper vtbassmatt@gmail.com wrote:

I updated to 1.1.9 from PyPI. Most of the bad behavior is fixed, though
the menu still defaults to appearing off the bottom of the screen. Since
this is just a small personal-use project, I'm willing to live with the
bug. Thanks for your help digging into it!

I work at Microsoft and will file a bug against Mobile IE for them to take
a look. I suspect it's some intersection of the CSS + JS I'm using and the
quirks of WebKit vs. Trident.

On Mon, Jan 21, 2013 at 9:58 AM, James Pic notifications@github.comwrote:

Actually I've got a problem in typeahead branch: you must either click
very fast, either double click on a choice.

Keyboard ENTER works... Anyway, I'm still interrested in your feedback.


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-12509505.

@jpic
Copy link
Member

jpic commented Jan 23, 2013

Is $ undefined ? That seems like a jquery loading problem.

About the placement of the autocomplete, I'll give a shot at rewriting the autocomplete box placement part in autocomplete.js, to be more like twitter bootstrap typeahead.

Thank you for your feedback.

@jpic
Copy link
Member

jpic commented Jan 23, 2013

I made a lot of refactors in autocomplete.js. Besides the many keyboard navigation improvements, it includes a new autocomplete box placement strategy, which was copied from bootstrap typeahead.

It might support your browsers. Since I intend to release this in 1.1.10, I've updated the demo site to use this branch, so you can test it directly from your browser by clicking this for example: http://jpic.pythonanywhere.com/admin/generic_m2m_autocomplete/modelgroup/add/ (user/pass: test)

(Many other ideas where fetched from typeahead, resulting in a reduction of around 20 SLOCS hah !)

@vtbassmatt
Copy link
Contributor Author

Works great on Safari on my Mac. IE 10 doesn't fare as well.

  • On Mobile (phone version), the box renders in the right place. I can't
    make a selection, though. Tapping any row makes the whole box flash like
    it's been selected, then disappear without committing the selection.
  • On Desktop (both Metro and regular desktop), I have to
    tap-and-lift-off with just the right timing in order to commit the
    selection. That's very minor for me as I rarely use desktop IE.

Is that branch on PyPI yet? I want to grab and use it, and I'll serve a
different form to IE 10 mobile for now.

On Wed, Jan 23, 2013 at 10:25 AM, James Pic notifications@github.comwrote:

I made a lot of refactors in autocomplete.js. Besides the many keyboard
navigation improvements, it includes a new autocomplete box placement
strategy, which was copied from bootstrap typeahead.

It might support your browsers. Since I intend to release this in 1.1.10,
I've updated the demo site to use this branch, so you can test it directly
from your browser by clicking this for example:
http://jpic.pythonanywhere.com/admin/generic_m2m_autocomplete/modelgroup/add/(user/pass: test)


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-12614153.

@jpic
Copy link
Member

jpic commented Jan 27, 2013

On Sun, Jan 27, 2013 at 3:43 PM, Matt Cooper notifications@github.com wrote:

Works great on Safari on my Mac. IE 10 doesn't fare as well.

  • On Mobile (phone version), the box renders in the right place. I can't
    make a selection, though. Tapping any row makes the whole box flash like
    it's been selected, then disappear without committing the selection.
  • On Desktop (both Metro and regular desktop), I have to
    tap-and-lift-off with just the right timing in order to commit the
    selection. That's very minor for me as I rarely use desktop IE.

Is that branch on PyPI yet? I want to grab and use it, and I'll serve a
different form to IE 10 mobile for now.

Are you talking about the typeahead branch, where autocomplete.js is
based on typeahead script ? It's known to be broken.

Or are you talking about the version >=1.1.10 which has backported
typeahead box placement strategy (amongst other things) ?
https://github.com/yourlabs/django-autocomplete-light/blob/master/CHANGELOG#L12
That one is on PyPi already.

Is there any way for me to debug on IE 10, desktop and mobile, without
having to buy a device or license ?

Thanks for your feedback Matt !

http://yourlabs.org
Customer is king - Le client est roi - El cliente es rey.

@vtbassmatt
Copy link
Contributor Author

I'm using the 1.1.10 version from PyPI.

Desktop: If you have access to a Windows 8 machine, that's IE10 desktop. If
you have Windows 7, you can get the IE10 "preview"
herehttp://windows.microsoft.com/en-US/internet-explorer/downloads/ie-10/worldwide-languages.
If you have neither but can run a Virtual PC VM (I think VMware can do it),
get the Windows 7 testing image
herehttp://www.microsoft.com/en-us/download/details.aspx?id=11575and
then put the IE10 preview on it.

Mobile: This works best on a native Windows install - I've had lots of
trouble getting the emulator to run under VMware Fusion on Mac. Once you
have a Win7 or Win8 machine, you can get the Windows Phone 8 SDK
herehttp://www.microsoft.com/en-us/download/details.aspx?id=35471.
It comes with an emulator which has IE10 Mobile already installed.

Sorry to be such a pain in the ass. I'm unblocked on my personal project,
so I think we're still pursuing this to make the library better for other
users. (If you're able to isolate the problem, of course I'll upgrade to
the fixed version.)

~matt

On Sun, Jan 27, 2013 at 7:43 AM, James Pic notifications@github.com wrote:

On Sun, Jan 27, 2013 at 3:43 PM, Matt Cooper notifications@github.com
wrote:

Works great on Safari on my Mac. IE 10 doesn't fare as well.

  • On Mobile (phone version), the box renders in the right place. I can't

make a selection, though. Tapping any row makes the whole box flash like
it's been selected, then disappear without committing the selection.

  • On Desktop (both Metro and regular desktop), I have to

tap-and-lift-off with just the right timing in order to commit the
selection. That's very minor for me as I rarely use desktop IE.

Is that branch on PyPI yet? I want to grab and use it, and I'll serve a
different form to IE 10 mobile for now.

Are you talking about the typeahead branch, where autocomplete.js is
based on typeahead script ? It's known to be broken.

Or are you talking about the version >=1.1.10 which has backported
typeahead box placement strategy (amongst other things) ?

https://github.com/yourlabs/django-autocomplete-light/blob/master/CHANGELOG#L12
That one is on PyPi already.

Is there any way for me to debug on IE 10, desktop and mobile, without
having to buy a device or license ?

Thanks for your feedback Matt !

http://yourlabs.org

Customer is king - Le client est roi - El cliente es rey.

Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-12755932.

@jpic
Copy link
Member

jpic commented Jan 28, 2013

Thanks a lot Matt.

I tried most browsers on browerstack.com, which provides VMs through a flash interface. I tried most platforms including Windows 8 with IE10.0 both "vanilla" and "desktop" editions (didn't notice a difference) and it worked.

You are of course not a pain in the ass, you're a great contributor.

@jpic
Copy link
Member

jpic commented Jan 29, 2013

Just tested IE10 preview on windows 7 VM and it works. Is it normal ?

I only have mouse and keyboard interface, no tapping...

@jpic
Copy link
Member

jpic commented Jan 29, 2013

Mobile: This works best on a native Windows install - I've had lots of
trouble getting the emulator to run under VMware Fusion on Mac. Once you
have a Win7 or Win8 machine, you can get the Windows Phone 8 SDK
herehttp://www.microsoft.com/en-us/download/details.aspx?id=35471.
It comes with an emulator which has IE10 Mobile already installed.

It only supports windows 8, which i can't install in VirtualBox (tried both 64bit and 32bit versions ... torrent downloaded of course so that might be a problem).

@vtbassmatt
Copy link
Contributor Author

Darn, that's the only good way I know to test IE 10 Mobile. Do you have any
access to a Win8 install on real hardware?

I was able to get Win8 running OK in VirtualBox, but the WinPhone emulator
itself never worked.

I think the problem in desktop IE may be the difference in how WebKit and
IE handle touch events. That would explain why mouseclicks work in IE (I
didn't try with mouse) but touch doesn't. There might be a JQuery shim I
can install to route the IE-style touch events properly.

On Tue, Jan 29, 2013 at 1:30 AM, James Pic notifications@github.com wrote:

Mobile: This works best on a native Windows install - I've had lots of
trouble getting the emulator to run under VMware Fusion on Mac. Once you
have a Win7 or Win8 machine, you can get the Windows Phone 8 SDK
herehttp://www.microsoft.com/en-us/download/details.aspx?id=35471.

It comes with an emulator which has IE10 Mobile already installed.

It only supports windows 8, which i can't install in VirtualBox (tried
both 64bit and 32bit versions ... torrent downloaded of course so that
might be a problem).


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-12826701.

@vtbassmatt
Copy link
Contributor Author

Yeah, just tried using the mouse and it works flawlessly. So I'm going to
chalk it up to JQuery's touch handling on the desktop.

I'll ask around if there's another way to try IE Mobile. Maybe some
company hosts a VM that you can remote into?

On Tue, Jan 29, 2013 at 11:48 AM, Matt Cooper vtbassmatt@gmail.com wrote:

Darn, that's the only good way I know to test IE 10 Mobile. Do you have
any access to a Win8 install on real hardware?

I was able to get Win8 running OK in VirtualBox, but the WinPhone emulator
itself never worked.

I think the problem in desktop IE may be the difference in how WebKit and
IE handle touch events. That would explain why mouseclicks work in IE (I
didn't try with mouse) but touch doesn't. There might be a JQuery shim I
can install to route the IE-style touch events properly.

On Tue, Jan 29, 2013 at 1:30 AM, James Pic notifications@github.comwrote:

Mobile: This works best on a native Windows install - I've had lots of
trouble getting the emulator to run under VMware Fusion on Mac. Once you
have a Win7 or Win8 machine, you can get the Windows Phone 8 SDK
herehttp://www.microsoft.com/en-us/download/details.aspx?id=35471.

It comes with an emulator which has IE10 Mobile already installed.

It only supports windows 8, which i can't install in VirtualBox (tried
both 64bit and 32bit versions ... torrent downloaded of course so that
might be a problem).


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-12826701.

@jpic
Copy link
Member

jpic commented Mar 29, 2013

I'm thinking, maybe it's because the input looses focus ? The autocomplete is ment to hide when the input looses focus.

@jpic
Copy link
Member

jpic commented Apr 4, 2013

Am I going to have to buy a windows phone and return it after I have fixed the bug ? lol

@jpic
Copy link
Member

jpic commented Nov 29, 2013

Hey Matt,

I hope you're doing great.

I was wondering if the problem persisted. Note that I have added support for IE8 recently ;)

Thanks

@vtbassmatt
Copy link
Contributor Author

Hey, thanks for reaching out again. I'm up to 1.4.2 on my site right now
and still have some issues, though it's usable for just me. (I never really
launched my site to others, it's fairly niche.) I'll get pip to install the
latest and see how it goes.

Assuming it works, next oddball client will be Xbox One ;) I believe that's
IE10 + some fixes back ported from IE11. If it doesn't work, I should be
able to get you much better debugging info, as I'm on the console team and
sit near the browser guys.

On Fri, Nov 29, 2013 at 3:32 AM, James Pic notifications@github.com wrote:

Hey Matt,

I hope you're doing great.

I was wondering if the problem persisted. Note that I have added support
for IE8 recently ;)

Thanks


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-29510987
.

@jpic
Copy link
Member

jpic commented Nov 29, 2013

That would be amazing, thanksss Matt !

@vtbassmatt
Copy link
Contributor Author

Nothing changed with 1.4.9 - didn't get better or worse :). It looks like
there were some breaking changes in 2.0 that I haven't had time to
understand, so I didn't upgrade all the way. Once I have some free time
(probably in January as I'm traveling soon) I'll figure that upgrade out.

I suspect the virtual keyboard is involved. It looks like d-a-l calculates
where to put the menu, then the VK comes out, then the browser scrolls the
page automatically to put the text box above the VK and the menu doesn't
update along with it.

On Fri, Nov 29, 2013 at 7:51 AM, James Pic notifications@github.com wrote:

That would be amazing, thanksss Matt !


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-29523923
.

@jpic
Copy link
Member

jpic commented Dec 5, 2013

Most v2 breakage is due to some class renamings I think.

On Thu, Dec 5, 2013 at 6:39 AM, Matt Cooper notifications@github.comwrote:

Nothing changed with 1.4.9 - didn't get better or worse :). It looks like
there were some breaking changes in 2.0 that I haven't had time to
understand, so I didn't upgrade all the way. Once I have some free time
(probably in January as I'm traveling soon) I'll figure that upgrade out.

I suspect the virtual keyboard is involved. It looks like d-a-l calculates
where to put the menu, then the VK comes out, then the browser scrolls the
page automatically to put the text box above the VK and the menu doesn't
update along with it.

On Fri, Nov 29, 2013 at 7:51 AM, James Pic notifications@github.com
wrote:

That would be amazing, thanksss Matt !


Reply to this email directly or view it on GitHub<
https://github.com/yourlabs/django-autocomplete-light/issues/76#issuecomment-29523923>

.


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-29872988
.

http://yourlabs.org http://blog.yourlabs.org
Customer is king - Le client est roi - El cliente es rey.

@vtbassmatt
Copy link
Contributor Author

Cool, that's what I suspected given the errors I saw.

Sent from my Windows Phone

-----Original Message-----
From: "James Pic" notifications@github.com
Sent: ‎12/‎5/‎2013 2:49 AM
To: "yourlabs/django-autocomplete-light" django-autocomplete-light@noreply.github.com
Cc: "Matt Cooper" vtbassmatt@gmail.com
Subject: Re: [django-autocomplete-light] Hard to select items in IE10 Mobile(#76)

Most v2 breakage is due to some class renamings I think.

On Thu, Dec 5, 2013 at 6:39 AM, Matt Cooper notifications@github.comwrote:

Nothing changed with 1.4.9 - didn't get better or worse :). It looks like
there were some breaking changes in 2.0 that I haven't had time to
understand, so I didn't upgrade all the way. Once I have some free time
(probably in January as I'm traveling soon) I'll figure that upgrade out.

I suspect the virtual keyboard is involved. It looks like d-a-l calculates
where to put the menu, then the VK comes out, then the browser scrolls the
page automatically to put the text box above the VK and the menu doesn't
update along with it.

On Fri, Nov 29, 2013 at 7:51 AM, James Pic notifications@github.com
wrote:

That would be amazing, thanksss Matt !


Reply to this email directly or view it on GitHub<
https://github.com/yourlabs/django-autocomplete-light/issues/76#issuecomment-29523923>

.


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-29872988
.

http://yourlabs.org http://blog.yourlabs.org
Customer is king - Le client est roi - El cliente es rey.

Reply to this email directly or view it on GitHub.

@jpic
Copy link
Member

jpic commented Dec 5, 2013

Replace autocomplete_light.FixedModelForm by autocomplete_right.ModelForm
and remove your own field definitions (even generic relations) and it
should just work. Let me know.

On Thu, Dec 5, 2013 at 4:25 PM, Matt Cooper notifications@github.comwrote:

Cool, that's what I suspected given the errors I saw.

Sent from my Windows Phone

-----Original Message-----
From: "James Pic" notifications@github.com
Sent: ‎12/‎5/‎2013 2:49 AM
To: "yourlabs/django-autocomplete-light" <
django-autocomplete-light@noreply.github.com>
Cc: "Matt Cooper" vtbassmatt@gmail.com
Subject: Re: [django-autocomplete-light] Hard to select items in IE10
Mobile(#76)

Most v2 breakage is due to some class renamings I think.

On Thu, Dec 5, 2013 at 6:39 AM, Matt Cooper notifications@github.comwrote:

Nothing changed with 1.4.9 - didn't get better or worse :). It looks
like
there were some breaking changes in 2.0 that I haven't had time to
understand, so I didn't upgrade all the way. Once I have some free time
(probably in January as I'm traveling soon) I'll figure that upgrade
out.

I suspect the virtual keyboard is involved. It looks like d-a-l
calculates
where to put the menu, then the VK comes out, then the browser scrolls
the
page automatically to put the text box above the VK and the menu doesn't
update along with it.

On Fri, Nov 29, 2013 at 7:51 AM, James Pic notifications@github.com
wrote:

That would be amazing, thanksss Matt !


Reply to this email directly or view it on GitHub<

https://github.com/yourlabs/django-autocomplete-light/issues/76#issuecomment-29523923>

.


Reply to this email directly or view it on GitHub<
https://github.com/yourlabs/django-autocomplete-light/issues/76#issuecomment-29872988>

.

http://yourlabs.org http://blog.yourlabs.org
Customer is king - Le client est roi - El cliente es rey.

Reply to this email directly or view it on GitHub.


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-29906569
.

http://yourlabs.org http://blog.yourlabs.org
Customer is king - Le client est roi - El cliente es rey.

@vtbassmatt
Copy link
Contributor Author

Good news and bad news. Good: I got upgraded to 2.0.0a8 today. (Included a
diff if you want to see what I ended up changing.) It's nicer looking and
works well in desktop Safari.

Bad news: it's still broken on IE mobile, and actually may be worse.
Before, I could eventually stab my finger just the right way and make it
recognize the selection. So far I've not been able to do that post-upgrade.
The menu updates correctly as I type more letters but no form of tapping on
the menu will replace the text box. It just dismisses the menu.

I'm using Bootstrap 2.0 and Django Crispy Forms which may be playing a role
here. As a reminder, this is NOT some mission-critical app somewhere --
it's my personal beer diary/tracker app -- so there's no need for fast
service. I just wanted you to know where the limitations are and appreciate
all the help you've been providing me to work through it.

On Thu, Dec 5, 2013 at 8:35 AM, James Pic notifications@github.com wrote:

Replace autocomplete_light.FixedModelForm by autocomplete_right.ModelForm
and remove your own field definitions (even generic relations) and it
should just work. Let me know.

On Thu, Dec 5, 2013 at 4:25 PM, Matt Cooper notifications@github.comwrote:

Cool, that's what I suspected given the errors I saw.

Sent from my Windows Phone

-----Original Message-----
From: "James Pic" notifications@github.com
Sent: 12/5/2013 2:49 AM
To: "yourlabs/django-autocomplete-light" <
django-autocomplete-light@noreply.github.com>
Cc: "Matt Cooper" vtbassmatt@gmail.com
Subject: Re: [django-autocomplete-light] Hard to select items in IE10
Mobile(#76)

Most v2 breakage is due to some class renamings I think.

On Thu, Dec 5, 2013 at 6:39 AM, Matt Cooper notifications@github.comwrote:

Nothing changed with 1.4.9 - didn't get better or worse :). It looks
like
there were some breaking changes in 2.0 that I haven't had time to
understand, so I didn't upgrade all the way. Once I have some free
time
(probably in January as I'm traveling soon) I'll figure that upgrade
out.

I suspect the virtual keyboard is involved. It looks like d-a-l
calculates
where to put the menu, then the VK comes out, then the browser scrolls
the
page automatically to put the text box above the VK and the menu
doesn't
update along with it.

On Fri, Nov 29, 2013 at 7:51 AM, James Pic notifications@github.com
wrote:

That would be amazing, thanksss Matt !


Reply to this email directly or view it on GitHub<

https://github.com/yourlabs/django-autocomplete-light/issues/76#issuecomment-29523923>

.


Reply to this email directly or view it on GitHub<

https://github.com/yourlabs/django-autocomplete-light/issues/76#issuecomment-29872988>

.

http://yourlabs.org http://blog.yourlabs.org
Customer is king - Le client est roi - El cliente es rey.

Reply to this email directly or view it on GitHub.


Reply to this email directly or view it on GitHub<
https://github.com/yourlabs/django-autocomplete-light/issues/76#issuecomment-29906569>

.

http://yourlabs.org http://blog.yourlabs.org
Customer is king - Le client est roi - El cliente es rey.


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-29913162
.

@vtbassmatt
Copy link
Contributor Author

Forgot the diff.

On Mon, Dec 30, 2013 at 2:40 PM, Matt Cooper vtbassmatt@gmail.com wrote:

Good news and bad news. Good: I got upgraded to 2.0.0a8 today. (Included a
diff if you want to see what I ended up changing.) It's nicer looking and
works well in desktop Safari.

Bad news: it's still broken on IE mobile, and actually may be worse.
Before, I could eventually stab my finger just the right way and make it
recognize the selection. So far I've not been able to do that post-upgrade.
The menu updates correctly as I type more letters but no form of tapping on
the menu will replace the text box. It just dismisses the menu.

I'm using Bootstrap 2.0 and Django Crispy Forms which may be playing a
role here. As a reminder, this is NOT some mission-critical app somewhere
-- it's my personal beer diary/tracker app -- so there's no need for fast
service. I just wanted you to know where the limitations are and appreciate
all the help you've been providing me to work through it.

On Thu, Dec 5, 2013 at 8:35 AM, James Pic notifications@github.comwrote:

Replace autocomplete_light.FixedModelForm by autocomplete_right.ModelForm
and remove your own field definitions (even generic relations) and it
should just work. Let me know.

On Thu, Dec 5, 2013 at 4:25 PM, Matt Cooper notifications@github.comwrote:

Cool, that's what I suspected given the errors I saw.

Sent from my Windows Phone

-----Original Message-----
From: "James Pic" notifications@github.com
Sent: 12/5/2013 2:49 AM
To: "yourlabs/django-autocomplete-light" <
django-autocomplete-light@noreply.github.com>
Cc: "Matt Cooper" vtbassmatt@gmail.com
Subject: Re: [django-autocomplete-light] Hard to select items in IE10
Mobile(#76)

Most v2 breakage is due to some class renamings I think.

On Thu, Dec 5, 2013 at 6:39 AM, Matt Cooper notifications@github.comwrote:

Nothing changed with 1.4.9 - didn't get better or worse :). It looks
like
there were some breaking changes in 2.0 that I haven't had time to
understand, so I didn't upgrade all the way. Once I have some free
time
(probably in January as I'm traveling soon) I'll figure that upgrade
out.

I suspect the virtual keyboard is involved. It looks like d-a-l
calculates
where to put the menu, then the VK comes out, then the browser
scrolls
the
page automatically to put the text box above the VK and the menu
doesn't
update along with it.

On Fri, Nov 29, 2013 at 7:51 AM, James Pic notifications@github.com

wrote:

That would be amazing, thanksss Matt !


Reply to this email directly or view it on GitHub<

https://github.com/yourlabs/django-autocomplete-light/issues/76#issuecomment-29523923>

.


Reply to this email directly or view it on GitHub<

https://github.com/yourlabs/django-autocomplete-light/issues/76#issuecomment-29872988>

.

http://yourlabs.org http://blog.yourlabs.org
Customer is king - Le client est roi - El cliente es rey.

Reply to this email directly or view it on GitHub.


Reply to this email directly or view it on GitHub<
https://github.com/yourlabs/django-autocomplete-light/issues/76#issuecomment-29906569>

.

http://yourlabs.org http://blog.yourlabs.org
Customer is king - Le client est roi - El cliente es rey.


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-29913162
.

----------------------- autocomplete_light_registry.py ------------------------
index 72969cf..9594e0f 100644
@@ -2,11 +2,26 @@ import autocomplete_light

from b33rweb.models import Beer, Brewer, Style

-autocomplete_light.register(Beer, search_fields=('name',),

  • autocomplete_js_attributes={'placeholder': 'beer...'})
    +autocomplete_light.register(Beer,
  • search_fields=['name',],
  • attrs={
  •   'placeholder': 'beer...',
    
  •   'data-widget-minimum-characters': 2,
    
  • }
    +)

-autocomplete_light.register(Brewer, search_fields=('name',),

  • autocomplete_js_attributes={'placeholder': 'brewer...'})
    +autocomplete_light.register(Brewer,
  • search_fields=['name',],
  • attrs={
  •   'placeholder': 'brewer...',
    
  •    'data-widget-minimum-characters': 2,
    
  • }
    +)

-autocomplete_light.register(Style, search_fields=('name',),

  • autocomplete_js_attributes={'placeholder': 'style...'})
    +autocomplete_light.register(Style,
  • search_fields=['name',],
  • attrs={
  •   'placeholder': 'style...',
    
  •    'data-widget-minimum-characters': 2,
    
  • }
    +)

----------------------------------- forms.py -----------------------------------
index f252490..7049313 100644
@@ -1,14 +1,13 @@
-from django.forms import ModelForm, Form
+from django.forms import Form
from django.forms import ModelChoiceField, CharField, Textarea, ModelChoiceField
from django.forms.extras.widgets import SelectDateWidget
from django.contrib.auth.forms import AuthenticationForm
from b33rweb.models import Brewer, Beer, Style, Rating, Serving, QuickEntry
import autocomplete_light
-from autocomplete_light.widgets import ChoiceWidget
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout, Field, Div

-class BrewerForm(ModelForm):
+class BrewerForm(autocomplete_light.ModelForm):
class Meta:
model = Brewer

@@ -18,10 +17,9 @@ class BrewerForm(ModelForm):
self.helper = FormHelper(self)
self.helper.add_input(Submit('submit', 'Submit'))

-class BeerForm(ModelForm):
+class BeerForm(autocomplete_light.ModelForm):
class Meta:
model = Beer

  •   widgets = autocomplete_light.get_widgets_dict(Beer)
    

    def init(self, _args, *_kwargs):
    super(BeerForm, self).init(_args, *_kwargs)
    @@ -31,13 +29,12 @@ class BeerForm(ModelForm):
    self.helper.add_input(Submit('submit', 'Submit'))
    self.helper.all().wrap(Div, css_class="clearfix")

-class RatingForm(ModelForm):
+class RatingForm(autocomplete_light.ModelForm):
class Meta:
model = Rating
widgets = {
'date': SelectDateWidget(years=(2012,2013,2014)),
'notes': Textarea(attrs={'rows':6}),

  •       'beer': ChoiceWidget('BeerAutocomplete'),
    }
    exclude = ('owner',)
    

@@ -50,12 +47,11 @@ class RatingForm(ModelForm):
self.helper.filter_by_widget(SelectDateWidget).wrap(Field, css_class="span2")
self.helper.all().wrap(Div, css_class="clearfix")

-class ServingForm(ModelForm):
+class ServingForm(autocomplete_light.ModelForm):
class Meta:
model = Serving
widgets = {
'date': SelectDateWidget(years=(2012,2013,2014)),

  •       'beer': ChoiceWidget('BeerAutocomplete'),
    }
    exclude = ('owner',)
    

@@ -94,7 +90,7 @@ class LoginForm(AuthenticationForm):

    self.helper.add_input(Submit('submit', 'Log in'))

-class QuickEntryForm(ModelForm):
+class QuickEntryForm(autocomplete_light.ModelForm):
class Meta:
model = QuickEntry
widgets = {

@jpic
Copy link
Member

jpic commented Jan 7, 2014

Hi Matt,

I'm sorry it's been a year since you opened this issue and I wasn't able to solve it due to lack of Xbox. You might know that I recently added Microsoft IE8 support #183 though.

Please be sure that Xbox support could become a priority for v2 !

So this my postal address in case anyone from the xbox core devs would be able to send over the latest xbox:

[removed for obvious security reasons]

Please join a note with the name(s) you want to credit as sponsor !

I hope you enjoyed reading this comment as much as I did writing it.

Sincerely

@vtbassmatt
Copy link
Contributor Author

I really wish I could send you one - unfortunately we don't have a broad
developer program yet. But I'll try out my web app today and let you know
how it goes. If you have a broad test suite that's available on a public
URL, let me know and I can try that as well.

For Xbox-related correspondence, feel free to use my work address:
mattc@xbox.com.

On Mon, Jan 6, 2014 at 6:01 PM, James Pic notifications@github.com wrote:

I really want to add Xbox support, so I'm going to boldly set a postal
address in case anyone like xbox core devs would be able to send over the
latest xbox:

James Dianda
42 Avenue Niel
75017 Paris

Please join a note with the name(s) you want to credit !

I hope you enjoyed reading this comment as much as I did writing it.

Sincerely


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-31707247
.

@jpic
Copy link
Member

jpic commented Jan 7, 2014

Well of course we have a test suite: http://travis-ci.org/yourlabs/django-autocomplete-light

@vtbassmatt
Copy link
Contributor Author

Of course :)

I was thinking something more like a page that exercised all the
capabilities so a user could play with them. I think you had me log into
something once but I don't have the link or credentials anymore.

On Tue, Jan 7, 2014 at 5:38 AM, James Pic notifications@github.com wrote:

Well of course we have a test suite:
http://travis-ci.org/yourlabs/django-autocomplete-light


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-31737448
.

@vtbassmatt
Copy link
Contributor Author

Good news, it pretty much works on Xbox One.

On Tue, Jan 7, 2014 at 5:49 AM, Matt Cooper vtbassmatt@gmail.com wrote:

Of course :)

I was thinking something more like a page that exercised all the
capabilities so a user could play with them. I think you had me log into
something once but I don't have the link or credentials anymore.

On Tue, Jan 7, 2014 at 5:38 AM, James Pic notifications@github.comwrote:

Well of course we have a test suite:
http://travis-ci.org/yourlabs/django-autocomplete-light


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-31737448
.

@jpic
Copy link
Member

jpic commented Jan 8, 2014

On Wed, Jan 8, 2014 at 3:19 PM, Matt Cooper notifications@github.comwrote:

Good news, it pretty much works on Xbox One.

Nice One Xbox and IE team !

http://yourlabs.org http://blog.yourlabs.org
Customer is king - Le client est roi - El cliente es rey.

@jpic
Copy link
Member

jpic commented Jan 10, 2014

I had the occasion to try it on a windows phone ... it is terrible indeed, apparently it doesn't it place right, but it just impossible to use because it seems like the browser doesn't create a touchable area per choice.

Could you confirm that ?

@vtbassmatt
Copy link
Contributor Author

Prior to 2.0, it was pretty bad but if you stabbed your finger at it "just
right", it would work. In 2.0, it definitely seems like there's no
touchable area at all.

Wonder if it's a "pointer events vs touch events" or similar technical
difference. I don't know anyone on the mobile IE team, but if it would help
you, I can reach out to some of the technical discussion groups and see if
anyone has an idea.

On Fri, Jan 10, 2014 at 3:07 AM, James Pic notifications@github.com wrote:

I had the occasion to try it on a windows phone ... it is terrible indeed,
apparently it doesn't it place right, but it just impossible to use because
it seems like the browser doesn't create a touchable area per choice.

Could you confirm that ?


Reply to this email directly or view it on GitHubhttps://github.com//issues/76#issuecomment-32019199
.

@jpic
Copy link
Member

jpic commented Jan 11, 2014

It would be great if you could show them and ask them why is IE making one big touchable area with the whole autocomplete instead of one touchable area per choice.

Thanks !

@vtbassmatt
Copy link
Contributor Author

Will do!

Sent from my Windows Phone

-----Original Message-----
From: "James Pic" notifications@github.com
Sent: ‎1/‎11/‎2014 8:12 AM
To: "yourlabs/django-autocomplete-light" django-autocomplete-light@noreply.github.com
Cc: "Matt Cooper" vtbassmatt@gmail.com
Subject: Re: [django-autocomplete-light] Hard to select items in IE10 Mobile(#76)

It would be great if you could show them and ask them why is IE making one big touchable area with the whole autocomplete instead of one touchable area per choice.
Thanks !

Reply to this email directly or view it on GitHub.

@jpic
Copy link
Member

jpic commented Jan 15, 2014

Thanks a heap Matt !

Let me know if you change your mind for the xbox lol

@jpic
Copy link
Member

jpic commented Jan 20, 2015

Hi Matt !

How's IE support these days ?

Did the IE dev team had the chance to take a look ?

Cheers

@vtbassmatt
Copy link
Contributor Author

I never could get them to engage. Luckily, it's working on IE11 which shipped with Phone 8.1. Since I'm the only user of my app and that's the OS I have, we're good :)

I think I broke something because it stopped working on my wife's iPhone 6. But since I haven't needed it, I haven't investigated. And I'm pretty sure it's my fault because it was working on iOS in the past.

Thanks for checking in!

Sent from my Windows Phone

-----Original Message-----
From: "James Pic" notifications@github.com
Sent: ‎1/‎20/‎2015 6:42 AM
To: "yourlabs/django-autocomplete-light" django-autocomplete-light@noreply.github.com
Cc: "Matt Cooper" vtbassmatt@gmail.com
Subject: Re: [django-autocomplete-light] Hard to select items in IE10 Mobile(#76)

Hi Matt !
How's IE support these days ?
Did the IE dev team had the chance to take a look ?
Cheers

Reply to this email directly or view it on GitHub.=

@jpic
Copy link
Member

jpic commented Jan 21, 2015

Ok Matt it's awesome that the bug is fixed in IE 11 ;)

Can we close this issue now ?

@vtbassmatt
Copy link
Contributor Author

Yes! I forgot it was still open. Thanks.

Sent from my Windows Phone

-----Original Message-----
From: "James Pic" notifications@github.com
Sent: ‎1/‎21/‎2015 2:24 AM
To: "yourlabs/django-autocomplete-light" django-autocomplete-light@noreply.github.com
Cc: "Matt Cooper" vtbassmatt@gmail.com
Subject: Re: [django-autocomplete-light] Hard to select items in IE10 Mobile(#76)

Ok Matt it's awesome that the bug is fixed in IE 11 ;)

Can we close this issue now ?

Reply to this email directly or view it on GitHub.=

@jpic
Copy link
Member

jpic commented Jan 21, 2015

Thanks a heap !

@jpic jpic closed this as completed Jan 21, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants