Fix shifting div from KTextbox

[sairina]

Description

Changes the v-if to the v-show in the KeenUI textbox so that the element is already in the DOM and we can toggle its display.

This is useful because it will keep that div below KTextbox for error validation, and prevent the UI from "shifting" whether or not there is an error validation for the field.

Issue addressed

• Addresses Outer div shifts slightly when focus is on KTextbox #238 in KDS
• Addresses shifting UI elements cause a 'missed click' kolibri#8675
• Must work with: Fix KTextbox in form vertical shift kolibri#8746

Before/after screenshots

See learningequality/kolibri#8746

Steps to test

After linking KDS to Kolibri, see the following for testing: learningequality/kolibri#8746

Does this introduce any tech-debt items?

• We will want to double check that the places in Kolibri that this affects (see: Fix KTextbox in form vertical shift kolibri#8746) are the only places where the shifting needs to be fixed.
• How can we document this, if this is how we will continue to deal with this issue in this way? Or, what can be done to be a more permanent fix?

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included

Reviewer guidance

• Is the code clean and well-commented (commented via git commit)

Post-merge updates and tracking

• Learning Platform update PR is submitted
• Learning Platform update PR is merged

Comments

[indirectlylit]

possibly a simpler fix?

[sairina]

@indirectlylit That was definitely the simpler fix. Seems to fix the issues that were found in learningequality/kolibri#8675

[indirectlylit]

cool, thank you.

before merging, would you mind adding an entry to the changelog?

[indirectlylit]

Darn, I forgot about this one before I tagged 1.2.0! I've pushed updates and will make a 1.2.1 now.