Consider refactoring to use :focus-within

[kethinov]

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

[alokpant]

I am not sure what exactly that needs to be done here. If you could provide more details, I would love to work on this one.

[kethinov]

Thanks for your interest!

Towards the bottom of this page is a demo of how :focus-within works: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

If you focus the form field in the demo, you can see that the :focus-within CSS selector allows you to change the CSS rules that apply to the parents of the input field. That's why the background color of the container changes when you focus the form field.

Now have a look at this project's forms: https://kethinov.github.io/semanticforms/semanticForms.html

If you focus one of the form fields, you can see the placeholder label move above the form. This is accomplished using a CSS transition, and some hacky uses of sibling selectors.

My hypothesis is we could use :focus-within to radically simplify the code that drives that placeholder label animation. I'm not sure precisely how, but it feels like a more direct approach.

Also worth noting, since we cannot use :focus-within on some browsers yet, we will need to load a polyfill for those browsers: https://allyjs.io/api/style/focus-within.html

[alokpant]

I tested around with :focus-within for a while, it is really nice but it does not looks as powerful as :placeholder-shown which you are already using. Here is an example, i created using :focus-within https://codepen.io/gorkhali/full/ZxdbLY/

It works as expected when you user if focused. But as soon as user goes out of focus, label goes back inside. There is an overlap of value user has entered and actual label. Without additional JS, I am not able to find a way to move label up when input field has value. https://codepen.io/gorkhali/full/EEBPYw/

On the other hand :placeholder-shown is really interesting. It looks much suitable for the current use-case. https://codepen.io/gorkhali/full/mxZeBK/

[kethinov]

You make good points. That is disappointing. I had hoped to reduce the dependency on JS a bit by leveraging new CSS features, but your demos make it pretty clear that :placeholder-shown plus some JS is actually the right tool for the job after all. Thanks for researching that!

If you're still looking for another way to contribute code to the project, I just filed another issue if you're interested.

For now, I'll close this issue unless you or someone else can present a compelling case that :focus-within would be a good idea to leverage after all.