I can't seem to capture the onfocus and onblur events for a typedInput in the node edit dialog. I use this to show/hide a tip field at the bottom of the form. It works for text input fields but not typedInputs.
Here's a subsection of my custom node HTML with examples of a simple text input field and a typedInput field (i.e. JSON and JSONata types) ...
In the JavaScript file within the oneditprepare function I have
var addTipHandlers = (sel,tip)=>{
$(sel).on('focus', function () { $(tip).show(); });
$(sel).on('blur', function () { $(tip).hide(); });
};
addTipHandlers("#node-input-stat","#tip-stat"); // works fine
// none of the following work...
addTipHandlers("#form-row-input-custom","#tip-custom");
addTipHandlers("#node-input-custom-label","#tip-custom");
addTipHandlers("#node-input-custom","#tip-custom");
addTipHandlers("#red-ui-typedInput-container","#tip-custom");
addTipHandlers("#red-ui-typedInput-input-wrap","#tip-custom");
addTipHandlers("#red-ui-typedInput-input","#tip-custom");
addTipHandlers("#red-ui-typedInput-value-label","#tip-custom");
addTipHandlers("#node-input-customType","#tip-custom");
This works fine for all the plain text inputs but not the custom typedInput element. As shown, I've tried matching all the different fields in the rendered HTML, but none seem to work. From a little console probing I'm guessing there is another layer or JQuery reference I'm missing.
Hi, I think you need to have a look in your browser's dev tools to see what is actually created.
While you create an ordinary input in your html file, when you apply typedInput, the standard input field is hidden and a more complex element is dynamically created. So to capture those events, you need to do so on the dynamic elements and not on your standard input field.
I was aware that the input text field gets dynamically replaced for the typedInput. I had looked at the resolved HTML in the console. That is where I got the various "#red-ui-typedInput-..." element references that I tried. I should have included that HTML in my original post. Here it is for the custom typedInput property example...
Note too that the "red-ui-typedInput-container input-error" shows an error because it is empty, but I have tried it with valid input and it makes no difference.
I guess I didn't read all the details previously. So focus and blur will only trigger on input/button elements. And only on keyboard or mouse/touch entry/exit. I think anyway. Would need to test.
To be honest, to apply custom tooltips, which I think is what you are attempting to do? I use hover CSS. I use the aria-label attribute to hold the tooltips then css something like this:
Thanks @TotallyInformation for your comment. Not exactly what I was doing. (I copied the approach used by the serial-in node and some other nodes that places a single tip field at the bottom of the dialog.) If I had it to do over I would consider your approach. Certainly more stylish, but more work at this point.
Solved!
Turns out I was on the right track but I made an error in the element specificity that I discovered after letting it sit for 2 days. I had specified id's (i.e. #) for the red-ui-typedInput elements I tried instead of a class. The following works:
The first part, #form-row-input-custom, is needed to differentiate the input element from other typedInput elements in the same dialog since the input has only a class and no id.
