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

[aaronksaunders]

{
    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]

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]

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.
[email protected]
201.214.5926 (M)
[email protected]
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 [email protected]
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
#18 (comment)
.

[mhartington]

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]

Take a look at this (new) example

[aaronksaunders]

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.
[email protected]
201.214.5926 (M)
[email protected]
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 [email protected]
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
#18 (comment)
.

[mhartington]

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]

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.
[email protected]
201.214.5926 (M)
[email protected]
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 [email protected] 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]

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]

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