Input element created with h:inputText is not editable

Question

I'm creating a fieldText using h:inputText. I can type but when I click on it, it doesn´t select the text. It only puts the cursor at the end of the text. I've tried adding pointer-events: none; to CSS as I found on another question but with no result. Can anyone help?

Here is the JSF code:

<ui:define name="keyboard">   
    <a4j:outputPanel layout="block" styleClass="content">
        <rich:panel id="kb">
            <f:facet name="header">
                <h:outputText id="keyboardHeading" value=""/>
            </f:facet>
            <h:inputText id="inputFieldKeyboard" value=""></h:inputText>  
        </rich:panel>
     </a4j:outputPanel>
</ui:define>

The HTML turns into:

<div id="keyboard" class="dr-pnl rich-panel ">
    <div id="keyboard_header" class="dr-pnl-h rich-panel-header ">
        <span id="keyboardHeading"></span>
    </div>
    <div id="keyboard_body" class="dr-pnl-b rich-panel-body ">
        <input id="inputFieldkeyboard" type="text" value="" name="inputFieldkeyboard"></input>
    </div>
    <div id="virtualKeyboard" class="virtual_keyboard"></div>
</div>

Answer 1

I've just found what the problem was, the element.contentEditable was set up to inherit. Not sure why it comes by default like this, I tried to add it to the DOM manually and also had the same problem, so I guess it´s related with a4j:outputPanel or rich:panel?

Now I get the element and set it up to true.