Add a CSS class to an inputField on render

[thetuningspoon]

Another question... I'm working on a module that uses hooks to modify an existing inputField and I would like to add a class to the final output of the inputField based on some logic. I'm having a hard time figuring out where the CSS classes are generated and whether this is even possible with hooks.

[LostKobrakai]

Which class exactly are you trying to change / add to? Each inputfield is wrapped in a few elements with different classes and each field itself has multiple classes.

[thetuningspoon]

Ideally I would like to add a class to the outer <li> wrapper. The class is to provide a hook for some javascript that should only apply if a particular configurable option is set.

[LostKobrakai]

That does not work as the whole wrapping markup is build by InputfieldWrapper::render which does not differentiate by the inputfield that will be rendered in it. The wrapper classes can only be changed for the whole form. But as you're using javascript you can simply go back from the inputfield itself to the wrapping <li>. To change the class for the input itself you'd need to hook before InputfieldSomething::render and use this:

$field = $event->object;
$field->attr("class" , $field->attr("class") . " myclass"); 

[adrian]

You can also do:

$field->addClass('myclass');

[thetuningspoon]

Thanks for the suggestions. I just discovered addClass() while looking through the code in Inputfield.php.

Unfortunately neither is working. The particular Inputfield I'm trying to work with is InputfieldPage. I'm wondering if the problem is that this is a sort of "hybrid" inputfield? It doesn't seem to use the attributes in its render() function at all, as far as I can tell.

EDIT: I'm now trying to hook after InputfieldPage::getInputfield to see if that will work. Still no luck.

public function init() {
    $this->addHookAfter('InputfieldPage::getInputfield', $this, 'hookAddCssClass');
}

public function hookAddCssClass(HookEvent $event) {
		
		$inputfield = $event->return;
		$inputfield->addClass('myClassName');
		$event->return = $inputfield; 
	}

[adrian]

This works for me:

public function init() {
    $this->addHookBefore('InputfieldPage::render', $this, 'hookAddCssClass');
}

public function hookAddCssClass(HookEvent $event) {
    $inputfield = $event->object;
    $inputfield->addClass('myClassName');
    $event->return = $inputfield;
}

[thetuningspoon]

Strange. That doesn't work for me. I thought only After hooks could read/modify the return value?

EDIT: Echoing out the contents of $inputfield->attr('class') gives me "FieldtypePage required myClassName" but none of those classes appear in the markup on processPageEdit.

[adrian]

Just to confirm we are talking about the same thing - this screenshot shows what I am seeing: 

A page field with an Inputfield of type Select - in the console you can see the added class.

[thetuningspoon]

Yes, that's exactly what I'm looking for. I'm running dev 2.5.22.

[adrian]

Weird that my posted code doesn't work for you. How exactly are you using it? What's the rest of your module code? Is it extending WireData?

You could also try it like this in your admin.php file.

wire()->addHookBefore('InputfieldPage::render', function($event) {
    $inputfield = $event->object;
    $inputfield->addClass('myClassName');
    $event->return = $inputfield;
});

[thetuningspoon]

Adrian,

If I hook into InputfieldSelect::render instead of InputfieldPage::render then your code works (but of course that's not what I want).

The module is extending WireData and I've commented out all my other hooks to make sure nothing else might be causing the problem.

I just uninstalled my module and tested your code in admin.php. No luck 

[adrian]

I honestly have no idea at this point. I am running a clean install (no other modules) of 2.5.23 (from yesterday's commits).

You are having some interesting hook issues lately, which that code from your other post yesterday working when it seems it shouldn't have and now this

Would you mind trying on a clean install?

[thetuningspoon]

Just tested in admin.php on a different installation and it's working.

The $event->return = $inputfield; bit seems to be unnecessary.

Thanks for your help. At least now I know it's something to do with my installation or another module.

[adrian]

The $event->return = $inputfield; bit seems to be unnecessary.

Good point - I often forget about that - that's a requirement for an "After" hook.

[thetuningspoon]

I downloaded the latest PW and upgraded and now it's working! 

One problem... This is working for page fields that use select fields, but not autocomplete/asm. I'm not sure why...