Changing to wired breaks Joomla

[StarAzure]

I am using this in a custom Joomla template but changing "input" to "wired-input" breaks Joomla form. Joomla expects < input >. Is there a way I can achieve the wired effect by using a css class instead of changing them to "wired-***" ?

[pshihn]

I'm not aware of Joomla. Do you have a specific error or specific property that may not be working?

[StarAzure]

Joomla does not recognize wired-input as an input.

See example - http://sketch.starazure.com > Joomla > Login

If you try to login, it thinks the fields are empty.

Also in the page - http://sketch.starazure.com/index.php/joomla/register
If you try to register it thinks all fields are empty.

If I change wired-input to "input" it works.

So back to my question - Is there a way I can use wired styles without changing my inputs to wired-inputs ? Ideally a css class would be more ideal.

I am kind of stuck because my theme is based on hand drawn elements inspired by your wired js - and found this issue as its almost ready to be released.

[pshihn]

Checkout https://www.getpapercss.com i think that may suit you well

[StarAzure]

That is a great alternative. Too bad I could not use Wired JS but thanks for the alternate solution. I will update my theme to use this.

[pshihn]

I'm sure with further investigation we could solve the Joomla issue as well. If I were to take a hunch, Joomla is scanning for particular tag names. Or it has some issues with shadowdom/custom elements.

[StarAzure]

I was taking a closer look at paper css and its a mess. It overrides alerts, bootstrap colors, alerts and much more. So basically it will kill a Bootstrap theme because the author has added a lot of Bootstrap overrides.

I have to try and solved this with wired js. Let me take a closer look but I am sure the issue is that Joomla looks for data passed in elements such as "input" and is not able to handle data from custom elements.

[StarAzure]

This could be the issue:

In my php file, the input is:

<wired-input class="form-control" type="text" name="username" id="username" value="" size="25" required="" aria-required="true" autofocus=""> </wired-input>

When it gets rendered, I see there is another input that gets generated inside wired-input with a different id as shown below:

<input id="txt" type="text" required="" autofocus="" size="25">

[pshihn]

That input is inside a Shadow DOM, so it's protected. How do you tell Joomla what controls to use for the form? Or does it pick them up automatically?

[StarAzure]

This is how Joomla renders a field:
In my login php file, it calls the form field type
<?php echo $field->input; ?>

The in my form field text.php file I have this:
<input class="form-control" type="text" name="<?php echo $name; ?>" id="<?php echo $id; ?>" <?php echo $dirname; ?> value="<?php echo htmlspecialchars($value, ENT_COMPAT, 'UTF-8'); ?>" <?php echo implode(' ', $attributes); ?> />

Similarly, I have password.php, textarea.php. email.php which needed to be updated with wired-input.

I have a work around but does not work for emails
I did this and wrapped around wired-input
<wired-input type="text"> <input class="form-control" type="text" name="<?php echo $name; ?>" id="<?php echo $id; ?>" <?php echo $dirname; ?> value="<?php echo htmlspecialchars($value, ENT_COMPAT, 'UTF-8'); ?>" <?php echo implode(' ', $attributes); ?> /> </wired-input>

This worked BUT it wanted to show a tooltip with error, I get javascript errors:

An invalid form control with name='jform[name]' is not focusable. register:1 An invalid form control with name='jform[username]' is not focusable. register:1 An invalid form control with name='jform[email1]' is not focusable.

Update on paper js - Its a mess and being a template developer I dont want to hand over messy code to my downloaders. I like wired js more.
Can wired be triggered looking for an html ID such as getElementbyID (wired-element) instead of having to change input to wired-input ?

I think my Joomla template can feature in "Built using Wired Js" section. Thanks for your help !

[pshihn]

I'm not sure putting an input inside wired-input is actually doing what the right thing here. Wired-input will not start using that input that you provided. Wired elements are supposed to be stand alone controls. Why it doesn't work with joomla, I think it may be something different.
The problem may be related to certain accessibility features or some api it's expecting.

When I get some time, I'll investigate further. Sorry, I'm not sure if I have a quick solution.

[pshihn]

Seem like you or joomla is adding an input control as a child of wired-element. You don't need to do that. Wired-input creates an input element automatically inside a shadow-root. So now there are 2 inputs. I assume joomla is asking that inserted input for the value rather than asking the value from wired-input.

[StarAzure]

I just tried another option but that did not work either. Joomla still does not recognize it as an input.

I used jQuery as shown below.

Php file:

<input type="password" class="form-control wired"

JQuery:

`$(function () {
'use strict'
$(".wired").replaceWith(function() { return "" + this.innerHTML + ""; });

})
`

Result:

When I remove the jQuery, thus removing wired-input, it works but as expected its not a wired input.

[pshihn]

I think the main problem here is that wired-input does not have the form-control class on it.
I don't see the code where you are inserting the wired-input. How are you defining it. Maybe add that class name?

[StarAzure]

form-control is just a Bootstrap class. It was adding an additional border and css properties so I had removed it. I added it back but it has no impact. Still facing the same issue.

This is how I insert wired-input

[pshihn]

I did some reading, and I think what I'll have to do is pass the name property from wired-input to the underlying input control.

Though I'm still not sure if hat would work with a shadow-root.

[pshihn]

I just released a new build.
Try v0.6.7 see if it helps.
https://unpkg.com/wired-elements@0.6.7/dist/wired-elements.bundled.js

[StarAzure]

I already use https://unpkg.com/wired-elements@latest/dist/wired-elements.bundled.min.js

It does not work and still says empty password.

Thanks for trying.

[pshihn]

can you check if the inside your has a name attribute set?

[pshihn]

Never mind, I just saw your site, and see that it is being set. Not sure what else to do here, and I dont really fancy learning joomla t the moment. :/

[StarAzure]

I understand. I don't know what to do either.