.mp-clickable-input-container(
  class={
    'mp-clickable-input-editing': editing,
    [`mp-clickable-input-size-${size}`]: true,
  }
)
  // we keep the input div in the DOM to expose it to form-related DOM APIs
  input(
    attrs=$helpers.getInputAttributes()
    on={
      input: $helpers.handleInput,
      blur: $helpers.handleInputBlur,
      keydown: $helpers.handleKeydown,
      invalid: $helpers.handleInputInvalid,
    }
    props={value: inputValue}
    style={
      'min-width': editing ? minInputWidth : null,
    }
    hook={insert: $helpers.inputInsertHook}
  )

  // we keep the label div in the DOM to set the width of the container (<input> relies on container width)
  // that's why we populate this label div with the inputValue while invisible, so it can invisibly expand the container width
  .mp-clickable-input-label(
    class={
      'mp-clickable-input-disabled': disabled,
      'mp-clickable-input-empty': !value,
    }
    on={click: disabled ? null : $helpers.handleLabelClick}
  )=(editing ? inputValue : value) || placeholder

  if editing && validationMessage
    mp-tooltip.mp-clickable-input-error-message(
      attrs={
        'always-show': true,
        placement: errorPlacement,
        type: `error`,
      }
    )=validationMessage