<templates>
  <t t-name="o-spreadsheet-TextInput">
    <div class="position-relative">
      <input
        type="text"
        t-ref="this.genericInputRef"
        t-att-class="this.inputClass"
        t-att-id="this.props.id"
        t-att-placeholder="this.props.placeholder"
        t-on-change="this.save"
        t-on-blur="this.onBlur"
        t-on-pointerdown="this.onMouseDown"
        t-on-pointerup="this.onMouseUp"
        t-on-focus="this.onFocus"
        t-on-input="this.onInput"
        t-on-keydown="this.onKeyDown"
        t-att-maxlength="this.props.maxLength"
      />
      <span
        t-if="this.props.errorMessage"
        class="os-input-error-icon text-danger position-absolute d-flex align-items-center"
        t-att-title="this.props.errorMessage">
        <t t-call="o-spreadsheet-Icon.ERROR"/>
      </span>
    </div>
  </t>
</templates>
