Skip to content

Fix: Select option values displaying with quotes and checkbox sync issues #530

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.

Sign up for GitHub

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

Jump to bottom
Open
hypnosis wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Fix: Select option values displaying with quotes and checkbox sync issues #530

hypnosis wants to merge 4 commits into from

Conversation

@hypnosis
Copy link

@hypnosis hypnosis commented Jan 15, 2026

Problem Description

When working with select (option) properties in the Properties panel, two critical bugs were discovered:

  1. Select values displayed with quotes: When adding or modifying select option values in the bottom Properties panel, they appeared with quotes in the UI (e.g., ["approve"] instead of approve), breaking the select dropdown functionality.

  2. Checkbox properties not syncing: Boolean checkbox values changed in the bottom Properties section did not update in the top properties view, causing data inconsistency.

Root Cause Analysis

The issues stemmed from two related problems in property value handling:

1. Incorrect Serialization (Select Options)

  • OptionCell.tsx was using serializeMultiDisplayString() for single-select values
  • This caused single values to be saved as JSON arrays in frontmatter: ["value"] instead of "value"
  • The select dropdown couldn't parse these quoted array strings correctly

2. Type Misdetection (All Properties)

  • parseProperty() was being called without explicit type information in two critical locations:
    • PropertiesView.tsx when loading properties from frontmatter
    • linkContextRow.ts when syncing context rows with frontmatter
  • This forced the system to use detectPropertyType() which auto-detects types based on value format
  • Arrays like ["approve"] were misdetected as option-multi instead of option
  • Boolean values weren't being parsed with correct type information, breaking synchronization

Solution

Commit 1: Fix Select Option Serialization

Files changed: OptionCell.tsx, PropertiesView.tsx, parsers.ts, properties.ts

  1. OptionCell.tsx: Changed single option value serialization from serializeMultiDisplayString() to direct value access (value[0] ?? "") in:

    • savePropValue() method
    • removeOption() method

  2. parsers.ts: Added array handling in parseProperty() for option type to extract first element if value is unexpectedly an array

  3. properties.ts: Added safety check in parseMDBStringValue() to parse and extract single values from JSON array strings when saving to frontmatter

Commit 2: Fix Type Detection in Property Parsing

Files changed: PropertiesView.tsx, linkContextRow.ts

  1. PropertiesView.tsx (lines 87-100):

    • Added lookup in both tableData.cols AND columns (from context schemas)
    • This ensures properties defined in context schemas are found with correct types
    • Pass the resolved field type to parseProperty()

  2. linkContextRow.ts (lines 92-96):

    • Modified filteredFrontmatter reduce function to find field type from fields array
    • Pass the field type as third parameter to parseProperty()
    • Ensures proper type-aware parsing during context row synchronization

Testing

✅ Select Options

  • Single select values now display without quotes
  • Select dropdowns function correctly after value changes
  • Multi-select options continue to work as expected

✅ Boolean Checkboxes

  • Checkboxes sync properly between top properties and bottom panel
  • Changes in either location reflect immediately in the other

✅ Type Detection

  • Properties from context schemas resolve proper types
  • No more misdetection of single values as multi-type
  • Type detection respects schema definitions over value format

Impact

  • Breaking Changes: None
  • Backward Compatibility: Full - handles both old (array) and new (string) formats
  • Performance: No impact - same number of operations, just with correct types

Screenshots

Before

  • Select values: ["approve"] (with quotes)
  • Checkboxes: Not syncing between views

After

  • Select values: approve (clean display)
  • Checkboxes: ✅ Syncing correctly

Related Issues: Fixes property value serialization and type detection bugs
Type: Bug Fix
Priority: High (affects data display and UX)

Danila Susak added 4 commits January 14, 2026 20:48
fix: atomic save for option properties and color scheme
bca2135 
Fixes issue where editing options in table properties would not save correctly.

Changes:
- Fix PropertyValue.tsx: Save options and colorScheme atomically to prevent data loss
- Fix EditOptionsModal.tsx: Auto-close color picker menu after color selection
- Fix OptionCell.tsx: Prioritize individual option colors over color scheme
- Fix package.json: Correct typo in dev script (nnode -> node)
- Update tsconfig.json: Change target from es6 to es2020 to support regex dotall flag
- Update .gitignore: Add data.json to ignore user settings

The main issue was that calling saveParsedValue twice would overwrite the first save
with stale data. Now both fields are saved in a single atomic operation.
fix: sync checkbox state between properties sections
92e1e4e 
Fixed issue where checkbox properties in the top section (inline properties)
were not updating when changed in the bottom Properties section.

Root cause: PropertiesView component was only listening to 'contextStateUpdated'
events, which are not triggered when individual file properties are saved via
saveProperties(). When a checkbox is toggled, it saves via saveProperties()
which triggers 'pathStateUpdated' event instead.

Solution: Added listener for 'pathStateUpdated' event to refresh property
values when the current path's properties change. This ensures both property
sections stay in sync.

Changes:
- Added pathChanged() handler to listen for pathStateUpdated events
- Added pathState to useEffect dependencies for proper cleanup
- Properties now refresh immediately when any property is saved
fix: prevent select option values from being serialized as JSON arrays
cfb90a8 
**Bug Description:**
When adding or modifying select (option) property values in the Properties
panel, the values were being incorrectly serialized as JSON arrays
(e.g., ["approve"]) instead of plain strings (e.g., "approve"). This caused
the values to display with quotes in the UI and broke the select dropdown
functionality.

**Root Causes:**
1. OptionCell was using serializeMultiDisplayString() for single select values,
   which was unnecessary and caused incorrect serialization
2. parseProperty() was called without explicit type information, causing
   detectPropertyType() to misidentify single option arrays as option-multi
3. No safeguards existed to handle array values when parsing single options

**Changes Made:**

1. **OptionCell.tsx**: Changed single option value serialization from
   serializeMultiDisplayString() to direct value access (value[0] ?? "")
   in savePropValue() and removeOption() methods

2. **PropertiesView.tsx**: Modified property parsing to pass explicit column
   type to parseProperty(), preventing type misdetection

3. **parsers.ts**: Added array handling in parseProperty() for option type
   to extract first element if value is unexpectedly an array

4. **properties.ts**: Added safety check in parseMDBStringValue() to parse
   and extract single values from JSON array strings when saving to frontmatter

**Testing:**
- Single select options now save and display correctly without quotes
- Multi-select options continue to work as expected
- Select dropdowns function properly after value changes
fix: pass explicit field types when parsing properties to prevent typ…
82474c4 
…e misdetection

**Bug Description:**
When property values were parsed from frontmatter in PropertiesView and
syncContextRow, the type parameter was not passed to parseProperty(). This
caused detectPropertyType() to auto-detect types based on the value format
rather than using the actual field schema definition.

For example, a single-select option field with an array value like ["approve"]
in frontmatter would be misdetected as option-multi instead of option, causing:
1. Values to display incorrectly with quotes
2. Checkbox properties not syncing between top and bottom views

**Root Cause:**
Two locations were calling parseProperty() without the type parameter:
1. PropertiesView.tsx line 100 - when loading properties from frontmatter
2. linkContextRow.ts line 94 - when syncing context rows with frontmatter

This caused the system to rely on detectPropertyType() which makes assumptions
based on value format (arrays → multi-type) rather than using the actual
schema definition.

**Changes Made:**

1. **PropertiesView.tsx** (line 87-95):
   - Added lookup in both tableData.cols AND columns (from context schemas)
   - This ensures properties defined in context schemas are found correctly
   - Pass the resolved field type to parseProperty() on line 100

2. **linkContextRow.ts** (line 92-96):
   - Modified filteredFrontmatter reduce function to find field type from
     fields array before calling parseProperty()
   - Pass the field type as third parameter to parseProperty()

**Impact:**
- Single-select options now parse correctly even when stored as arrays
- Boolean checkboxes sync properly between top properties and bottom panel
- Multi-select options continue to work as expected
- Type detection now respects schema definitions over value format

**Testing:**
- ✅ Single select with array value displays without quotes
- ✅ Boolean checkboxes sync between top and bottom views
- ✅ Multi-select options work correctly
- ✅ Properties from context schemas resolve proper types
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@hypnosis