search

formly-js / angular-formly-templates-ionic

Angular-Formly: Ionic Framework Templates
http://formly-js.github.io/angular-formly-templates-ionic/#/
MIT License
86 stars 30 forks source link

Weird Animation and No Focus When Using Focus option On Input Field #18

Open aaronksaunders opened 9 years ago

aaronksaunders commented 9 years ago 
{
    key: 'title',
    type: 'input',
    templateOptions: {
        focus : 'true', // <== this doesnt work, and messes with animation
        type: 'text',
        required: true,
        placeholder: 'Event Title'
    }
},

Looking for options to get the keyboard to appear on screen when screen opens, could hack it if necessary

mhartington commented 9 years ago

Hmm, have you tried adding 

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

to your config.xml? Had some weird animation issues as well but they seemed to be resolved when I added this.

aaronksaunders commented 9 years ago

the focus works, my bad for not reading the readme carefully, but I am still getting jumpy UI and the keyboard is popping up too quickly, needs some sort of delay due to the animation of the form sliding in.

Also it doesn't appear to have any impact on a modal sliding in from the bottom.

I will try and break it out into a smaller codePen to demonstrate the issue

-- http://www.clearlyinnovative.com/build-it/

Aaron K. Saunders CEO Clearly Innovative Inc. aaron@clearlyinnovative.com 201.214.5926 (M) blog@clearlyinnovative.com www.clearlyinnovative.com @aaronksaunders

This email message and any attachment(s) are for the sole use of the intended recipient(s) and may contain proprietary and/or confidential information which may be privileged or otherwise protected from disclosure. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient(s), please contact the sender by reply email and destroy the original message and any copies of the message as well as any attachment(s) to the original message.

On Tue, Jul 7, 2015 at 2:31 PM, Mike Hartington notifications@github.com wrote:

Hmm, have you tried adding

to your config.xml? Had some weird animation issues as well but they seemed to be resolved when I added this.

— Reply to this email directly or view it on GitHub https://github.com/formly-js/angular-formly-templates-ionic/issues/18#issuecomment-119294385 .

mhartington commented 9 years ago

Sounds good. I remember there being some issues with autofocusing inputs with Ionic, which could be resolved by adding a small timeout and using a directive directive. We could do the same to formly-focus.js. @kentcdodds maybe able to shed some light here if it's possible to override that.

kentcdodds commented 9 years ago

Take a look at this (new) example

aaronksaunders commented 9 years ago

unless I am missing something here, the focus works fine on regular forms... is there a way for me to pass a focus-wait down to the underlying directive?

-- http://www.clearlyinnovative.com/build-it/

Aaron K. Saunders CEO Clearly Innovative Inc. aaron@clearlyinnovative.com 201.214.5926 (M) blog@clearlyinnovative.com www.clearlyinnovative.com @aaronksaunders

This email message and any attachment(s) are for the sole use of the intended recipient(s) and may contain proprietary and/or confidential information which may be privileged or otherwise protected from disclosure. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient(s), please contact the sender by reply email and destroy the original message and any copies of the message as well as any attachment(s) to the original message.

On Tue, Jul 7, 2015 at 6:54 PM, Kent C. Dodds notifications@github.com wrote:

Take a look at this (new) example http://angular-formly.com/#/example/field-options/focus

— Reply to this email directly or view it on GitHub https://github.com/formly-js/angular-formly-templates-ionic/issues/18#issuecomment-119366865 .

mhartington commented 9 years ago

Thats what I was wondering as well. Looks like I may have to add this to the templates. http://docs.angular-formly.com/v6.16.0/docs/formly-focus

It defaults to 0, we may need to bump that up a bit for ionic. @aaronksaunders would you be willing to test this out and maybe make a PR?

aaronksaunders commented 9 years ago

Sure I will give it a try... Just point me in the right direction. Haven't dug too deep into the ionic template code

Aaron K. Saunders CEO Clearly Innovative Inc. aaron@clearlyinnovative.com 201.214.5926 (M) blog@clearlyinnovative.com www.clearlyinnovative.com @aaronksaunders

An Appcelerator Titanium Gold Partner

This email message and any attachment(s) are for the sole use of the intended recipient(s) and may contain proprietary and/or confidential information which may be privileged or otherwise protected from disclosure. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient(s), please contact the sender by reply email and destroy the original message and any copies of the message as well as any attachment(s) to the original message.

On Jul 7, 2015, at 7:18 PM, Mike Hartington notifications@github.com wrote:

Thats what I was wondering as well. Looks like I may have to add this to the templates. http://docs.angular-formly.com/v6.16.0/docs/formly-focus

It defaults to 0, we may need to bump that up a bit for ionic. @aaronksaunders would you be willing to test this out and maybe make a PR?

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

mhartington commented 9 years ago

Sure, you should just have to work with this

https://github.com/formly-js/angular-formly-templates-ionic/blob/master/src/fields/ion-input.html

And add a statement for focus-wait.

<input ng-model="model[options.key]"
       focus-wait="{{options.templateOptions.focusWait? options.templateOptions.focusWait: '500'}}"
       />

With the way ionic handles inputs and setting focus, you should test placing focusWait on the label rather that the input as well.

Then you should be able to to gulp build, push to github and make a pull request.

kentcdodds commented 9 years ago

Actually, interesting story. That formly-focus directive came from kcd-angular which covered some use cases that angular-formly hasn't yet needed. I think that support for focusWait should be added to angular-formly core. As formly-focus is considered an "internal directive", this wouldn't have to be part of a breaking change... But I'll probably make it part of the 7.0.0 release anyway just in case.

Note, there's an example of how to dynamically add the needed attributes in the docs: http://docs.angular-formly.com/v6.16.0/docs/formly-focus