Skip to content

Conversation

@FurkanKambay
Copy link
Contributor

@FurkanKambay FurkanKambay commented Jan 1, 2026

Screen.Recording.2026-01-17.005146.mp4

@FurkanKambay FurkanKambay changed the title feat: make settings field labels selectable (#2275) feat: make settings field labels selectable Jan 1, 2026
@mbnuqw
Copy link
Owner

mbnuqw commented Jan 16, 2026

Thanks, but I'd like to be able to switch settings by clicking on the whole field area. This can be achieved by checking the current selection's type in mousedown/up event handlers of the top-most x-field.vue element.

Something like this:

let rangeIsSelected = false
function onMouseDown(e: DOMEvent<MouseEvent>) {
  rangeIsSelected = getSelection()?.type === 'Range'
  if (e.detail > 1) e.preventDefault()
}

function onMouseUp(e: DOMEvent<MouseEvent>) {
  if (rangeIsSelected || getSelection()?.type === 'Range') return

  // And then field-specific stuff:
  // For select-field
  if (props.inactive || !props.opts || Array.isArray(props.value)) return
  if (e.button === 0) switchOption(1)
  if (e.button === 2) switchOption(-1)
  // For toggle-field and count-field
  toggle()
  // text-field
  focus()
}

No need to change select-input component in this case.

@FurkanKambay
Copy link
Contributor Author

@mbnuqw perfect, thank you for the direction!

just wanna take a look into a couple more small improvements before its ready to merge :)

@FurkanKambay
Copy link
Contributor Author

FurkanKambay commented Jan 16, 2026

I see that NumFields don't have mouse handlers because they can contain two input parts like this

image

Should it handle mouse events when the SelectField is hidden, or maybe LMB focuses the TextInput and right click modifies the SelectInput?

Similarly, the Limit the count of simultaneously reloading tabs setting (CountField) has both a TextInput and a ToggleInput, but clicking it just toggles it. I think left click to focus and right click to toggle would work really nice for these cases.

UPDATE: I implemented this (and for StyleFields) in the latest commit

@FurkanKambay
Copy link
Contributor Author

Also fixed this click-through propagation bug:

Screen.Recording.2026-01-17.005146.mp4

@FurkanKambay FurkanKambay deleted the branch mbnuqw:v5 January 17, 2026 07:32
@FurkanKambay FurkanKambay deleted the v5 branch January 17, 2026 07:32
@FurkanKambay FurkanKambay restored the v5 branch January 17, 2026 07:32
@FurkanKambay FurkanKambay reopened this Jan 17, 2026
@FurkanKambay FurkanKambay changed the title feat: make settings field labels selectable feat: setting field improvements Jan 17, 2026
@FurkanKambay
Copy link
Contributor Author

FurkanKambay commented Jan 17, 2026

sorry for the messy force push stuff, I wanted the commits to be tidier.
Almost ready for review now, I can revert the latest commit if you don't like that behavior (#2332 (comment))

caught a bug, working on it

The fields in PanelConfig have a weird text selection bug, couldn't figure it out yet.

@mbnuqw
Copy link
Owner

mbnuqw commented Jan 18, 2026

Awesome, thank you!

Should it handle mouse events when the SelectField is hidden, or maybe LMB focuses the TextInput and right click modifies the SelectInput?

Yes, let's keep you're implementation.

The fields in PanelConfig have a weird

That's selectionchange handler in popup.panel-config/panel-config.vue. I'll fix this after merge.

@mbnuqw mbnuqw merged commit ddb90b1 into mbnuqw:v5 Jan 18, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Enhancement] Make settings labels selectable, clicking not toggle/select setting

2 participants