-
-
Notifications
You must be signed in to change notification settings - Fork 469
Fix Save button not enabling while editing exploration name or description #5137
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: develop
Are you sure you want to change the base?
Fix Save button not enabling while editing exploration name or description #5137
Conversation
| on:change={handleNameChange} | ||
| on:input={setHasChangesToTrue} | ||
| on:input={(e) => { | ||
| setHasChangesToTrue(); | ||
| handleNameChange(e); | ||
| }} | ||
| /> | ||
| </LabeledInput> | ||
| </FormField> | ||
| <FormField> | ||
| <LabeledInput label={$_('description')} layout="stacked"> | ||
| <TextArea | ||
| value={description} | ||
| aria-label={$_('description')} | ||
| on:change={handleDescriptionChange} | ||
| on:input={setHasChangesToTrue} | ||
| on:input={(e) => { | ||
| setHasChangesToTrue(); | ||
| handleDescriptionChange(e); | ||
| }} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The name and description update should happen after a debounced interval when the user is typing and it should immediately happen when the input loses focus. Please use the Debounce component from our component library to do this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated the name and description inputs to use the Debounce component, with debounced updates during typing and immediate updates on blur.
Fixes #4723
This PR fixes a UX issue in the Exploration inspector where the Save button appeared disabled while editing the exploration name or description. Although changes were being made, the Save button only became enabled after the input lost focus, which was confusing and made it seem like edits were not being detected.
Technical details
Problem
The Save button relies on a
hasChangesflag to reflect unsaved edits.Previously:
hasChangeswas updated only on thechangeeventchangefires only after the input loses focusThis caused a mismatch between user actions and UI feedback.
Fix
inputeventThis ensures the Save button reflects unsaved changes immediately while typing.
Behavior changes
Files touched
mathesar_ui/src/systems/data-explorer/exploration-inspector/ExplorationTab.svelteChecklist
Update index.md).developbranch of the repositoryvisible errors.
Developer Certificate of Origin
Developer Certificate of Origin