fix(Form/Input/Date): Make the glyphicon clickable

[fdescamps]

Related issue

Description of the issue

When you use the Form/Input/Date component, you are not able to click on the glyphicon in the input field. You have to click somewhere else in the input field.

Person(s) for reviewing proposed changes

@gcruchon @guillaumechervet @guillaume-chervet @guillaumechervetaxa @samuel-gomez @samuel-gomez-axa @Cleclemi28 @youf-olivier @Gparquet

Important

Before creating a pull request run unit tests

$ npm test

# watch for changes
$ npm test -- --watch

# For a specific file (e.g., in packages/context/__tests__/command.test.js)
$ npm test -- --watch packages/action

[gcruchon]

Thanks foe this PR! I pulled it and it does the job.

However, modals have z-index > 1000. If it's possible to add a date input field in a modal, I guess it would not work. Not sure if such situation can occur, though... @samuel-gomez / @guillaumechervet : what do you think?

[fdescamps]

Hi @samuel-gomez / @guillaumechervet,

I permit myself to ask you if you saw @gcruchon question ?

Thanks by advance for reviewing my first PR on this toolkit ;)

[arnaudforaison]

For me z-index it's not a good practice. I think you may refactor it to remove input z-index

[gcruchon]

I can't agree more with you, @arnaudforaison, about z-index. They are, in deed, bad practices.

However, there are 33 of them in the packages. I think there should be a dedicated issue to remove them all at once. Moreover, I tend to think it may lead to some breaking changes (some HTML element may have to be moved around).

This issue should also ask to improve the document to clearly state that z-index are not welcome, what do you think?

[arnaudforaison]

Yes I agree that's a general review of z-index must be necessary.

But why to no intent here as 1st sample for other ?

[gcruchon]

My experience says that, z-index are like !important, if you try to remove one, you'll have to remove them all. I doubt the "sample" as a solution that will work with all the combinations of component. But maybe @fdescamps wants to try?

[gcruchon]

Instead of changing this z-index, just leave it "as-is" and remove z-index on .glyphicon-calendar (line 17). Should do the trick.

[fdescamps]

I test it asap, thanks for the review @gcruchon and @arnaudforaison. It is quite interesting !

[fdescamps]

(In //, I would like the thoughts of @guillaumechervet @guillaumechervetaxa @guillaume-chervet and @samuel-gomez @samuel-gomez-axa)

[samuel-gomez-axa]

indeed, this solution may not work all the time, you have to test in many cases. but I don't think using z-indexes is bad practice.

[fdescamps]

Hi,

I test "Instead of changing this z-index, just leave it "as-is" and remove z-index on .glyphicon-calendar (line 17). Should do the trick." And it works !

Thanks @gcruchon

[guillaume-chervet]

So lets try it on ours application ^^