In the form control wrapper wrap the elements inside a <div>

[gfoidl]

trafficstars

Without wrapping inside a <div> the valiation feedback may be shown on other input-controls too, which is not intended. Thus we need to wrap all controls related to the input inside a div, in order to scope the style to it.

[github-actions[bot]]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

[gfoidl]

Please don't close, mege instead 😉

[github-actions[bot]]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

[gfoidl]

Please don't close, mege instead 😉

Still the same.

[mrholek]

@gfoidl Without wrapping inside a div the valiation feedback may be shown on other input-controls too, which is not intended. Can you show me an example?

[gfoidl]

From https://playcode.io/988904

The seconds input has no invalid set, also the red border isn't shown. But the feedbackInvalid is shown, which is wrong. This PR corrects that behavior.

It has to do on how bootstrap validation rules are specified in CSS.

[github-actions[bot]]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

[gfoidl]

Dear bot, don't close and disable yourself.

[mrholek]

@gfoidl I just checked it and an additional div breaks <CInputGroup /> layout.

[gfoidl]

Then this should be fixed (too). In https://github.com/coreui/coreui-vue/pull/209#issuecomment-1282798171 when the <div>s are removed it's wrong behavior.

For my use I fixed this locally, and there's also a <CInputGroup /> -- the layout is correct and not broken. Bootstrap didn't change in how the validation rules are specified, so a wrapper div for the inputs is needed.

[mrholek]

@gfoidl please check this css

.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .form-floating:focus-within {
  z-index: 5;
}

if we add an additional div, then we will have something like that .input-group > div instead of .input-group >.form-control

[gfoidl]

Yep, that's right.

But

<script setup>
  import { ref, computed } from 'vue'

  const name = ref("");
  const age = ref();
</script>

<template>
  <CForm novalidate>
    <CFormInput label="Name" :value="name" feedbackInvalid="Name must be entered" invalid />
    <!-- Note no 'invalid' given here-->
    <CFormInput label="Age" :value="age" type="number" feedbackInvalid="Age must be given" />
  </CForm>
</template>

<style>
  form {
    width: 60%;
    margin: 1rem;
  }
</style>

Will show the feedbackInvalid on the second input where it should not be shown. How would solve that issue otherwise?

[github-actions[bot]]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions