fix: prevent Section Name input from losing focus on every keystroke#2698
Open
RabbiIslamRony wants to merge 1 commit intosovware:developmentfrom
Open
fix: prevent Section Name input from losing focus on every keystroke#2698RabbiIslamRony wants to merge 1 commit intosovware:developmentfrom
RabbiIslamRony wants to merge 1 commit intosovware:developmentfrom
Conversation
The Section Name input inside the Configure Section panel lost focus after typing a single character. This happened because the fieldListComponentKey computed property included groupData.label in the key. Every keystroke updated the label, changed the key, and forced Vue to destroy and recreate the field-list-component — along with its input DOM element. Changes: - Remove groupData.label from fieldListComponentKey so the key stays stable while the user types (Form_Builder_Widget_Group_Header_Component.vue) - Add deep: true to the value watcher in Field_List_Component.vue so that external label changes (e.g. inline header editing) still propagate to the Section Name input without the key-based re-render hack
Collaborator
|
Looks Good. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR Type
What kind of change does this PR introduce?
Description
In the Add Listing Form Builder, opening Configure Section and typing in the Section Name input caused the field to lose focus after every keystroke. https://prnt.sc/B4yEqT7pE0Ii
🔍 Root Cause
The
fieldListComponentKeycomputed property inForm_Builder_Widget_Group_Header_Component.vueincludedgroupData.labelin the Vue:key.Each character update:
labelkeyfield-list-component✅ Fix
groupData.labelfromfieldListComponentKeyto keep the key stable during typing.deep: trueto thevaluewatcher inField_List_Component.vueso label updates from other sources (e.g. inline header label editing) still sync properly without relying on key-based re-rendering.📂 Files Changed
assets/src/js/admin/vue/modules/form-builder-modules/widget-group-components/Form_Builder_Widget_Group_Header_Component.vueassets/src/js/admin/vue/modules/Field_List_Component.vueAny linked issues
Fixes #
#2655
Checklist