Fix tab jumping on form input changes by preventing sheet re-rendering
This commit is contained in:
parent
d020822012
commit
f643999573
4 changed files with 103 additions and 11 deletions
|
@ -4,12 +4,13 @@
|
||||||
* SPDX-License-Identifier: MIT
|
* SPDX-License-Identifier: MIT
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.ds4-form-group {
|
.ds4-form-group,
|
||||||
|
.ds4-item-sheet .form-group {
|
||||||
clear: both;
|
clear: both;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin: 3px 0;
|
margin: 8px 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&--start {
|
&--start {
|
||||||
|
@ -24,4 +25,78 @@
|
||||||
flex: 2;
|
flex: 2;
|
||||||
line-height: var(--input-height);
|
line-height: var(--input-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add spacing between form groups
|
||||||
|
& + & {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style for slim form groups (input + select combinations)
|
||||||
|
&.slim {
|
||||||
|
margin: 6px 0;
|
||||||
|
|
||||||
|
.form-fields {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
min-width: 120px;
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin-right: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style standard Foundry form-fields containers
|
||||||
|
.ds4-item-sheet .form-fields {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
input, select, textarea {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: var(--color-text-accent);
|
||||||
|
box-shadow: 0 0 3px var(--color-text-accent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23efe6d8' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 8px center;
|
||||||
|
background-size: 8px;
|
||||||
|
padding-right: 24px;
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Improve label styling
|
||||||
|
.ds4-item-sheet .form-group > label {
|
||||||
|
flex: 0 0 160px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--color-form-label);
|
||||||
|
line-height: var(--input-height);
|
||||||
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -59,13 +59,11 @@
|
||||||
--ds4-font-heading: "Wood Stamp", sans-serif;
|
--ds4-font-heading: "Wood Stamp", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Apply Wood Stamp font only to DS4 sheet-specific elements
|
// Apply Wood Stamp font only to DS4 sheet-specific elements (excluding window titles)
|
||||||
.ds4-actor-sheet h1,
|
|
||||||
.ds4-actor-sheet h2,
|
.ds4-actor-sheet h2,
|
||||||
.ds4-actor-sheet h4,
|
.ds4-actor-sheet h4,
|
||||||
.ds4-actor-sheet h5,
|
.ds4-actor-sheet h5,
|
||||||
.ds4-actor-sheet h6,
|
.ds4-actor-sheet h6,
|
||||||
.ds4-item-sheet h1,
|
|
||||||
.ds4-item-sheet h2,
|
.ds4-item-sheet h2,
|
||||||
.ds4-item-sheet h4,
|
.ds4-item-sheet h4,
|
||||||
.ds4-item-sheet h5,
|
.ds4-item-sheet h5,
|
||||||
|
@ -76,3 +74,11 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: 100 !important;
|
font-weight: 100 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Keep window titles readable with standard font
|
||||||
|
.ds4-actor-sheet .window-title,
|
||||||
|
.ds4-item-sheet .window-title {
|
||||||
|
font-family: var(--font-sans) !important;
|
||||||
|
text-transform: none !important;
|
||||||
|
font-weight: normal !important;
|
||||||
|
}
|
||||||
|
|
|
@ -260,7 +260,9 @@ export class DS4ItemSheet extends foundry.applications.api.HandlebarsApplication
|
||||||
*/
|
*/
|
||||||
_initializeTabHandlers() {
|
_initializeTabHandlers() {
|
||||||
const tabNavigation = this.element.querySelector('.tabs[data-group="primary"]');
|
const tabNavigation = this.element.querySelector('.tabs[data-group="primary"]');
|
||||||
if (!tabNavigation) return;
|
if (!tabNavigation) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Remove existing event listeners to prevent memory leaks
|
// Remove existing event listeners to prevent memory leaks
|
||||||
this._removeTabHandlers();
|
this._removeTabHandlers();
|
||||||
|
@ -272,7 +274,9 @@ export class DS4ItemSheet extends foundry.applications.api.HandlebarsApplication
|
||||||
this._tabClickHandler = (event) => {
|
this._tabClickHandler = (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const item = event.target.closest('.item[data-tab]');
|
const item = event.target.closest('.item[data-tab]');
|
||||||
if (!item) return;
|
if (!item) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const tabId = item.dataset.tab;
|
const tabId = item.dataset.tab;
|
||||||
const groupId = item.dataset.group;
|
const groupId = item.dataset.group;
|
||||||
|
@ -285,6 +289,15 @@ export class DS4ItemSheet extends foundry.applications.api.HandlebarsApplication
|
||||||
tabNavigation.addEventListener('click', this._tabClickHandler);
|
tabNavigation.addEventListener('click', this._tabClickHandler);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Override form submission to prevent re-rendering
|
||||||
|
*/
|
||||||
|
async _processSubmitData(event, form, submitData, options = {}) {
|
||||||
|
// Always prevent re-rendering on form updates
|
||||||
|
options.render = false;
|
||||||
|
return super._processSubmitData(event, form, submitData, options);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove tab event handlers to prevent memory leaks
|
* Remove tab event handlers to prevent memory leaks
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -88,10 +88,8 @@ SPDX-License-Identifier: MIT
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="system.allowsDefense-{{data._id}}" title="{{localize 'DS4.SpellAllowsDefenseDescription'}}">{{localize
|
<label for="system.allowsDefense-{{data._id}}" title="{{localize 'DS4.SpellAllowsDefenseDescription'}}">{{localize
|
||||||
"DS4.SpellAllowsDefense"}}</label>
|
"DS4.SpellAllowsDefense"}}</label>
|
||||||
<div class="form-fields">
|
<input id="system.allowsDefense-{{data._id}}" data-dtype="Boolean" type="checkbox" name="system.allowsDefense"
|
||||||
<input id="system.allowsDefense-{{data._id}}" data-dtype="Boolean" type="checkbox" name="system.allowsDefense"
|
{{checked data.system.allowsDefense}} />
|
||||||
{{checked data.system.allowsDefense}} />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group slim">
|
<div class="form-group slim">
|
||||||
<label title="{{localize 'DS4.SpellMinimumLevelDescription'}}">{{localize "DS4.SpellMinimumLevel"}}</label>
|
<label title="{{localize 'DS4.SpellMinimumLevelDescription'}}">{{localize "DS4.SpellMinimumLevel"}}</label>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue