HTML label tags not working in Live Preview reading mode

Bug graveyard
1

Hello, i’ve encountered an issue in Live Preview where HTML <label> tags will not work correctly. The same inline HTML will work correctly in Source mode.

Steps to reproduce

  1. Open a note in Obsidian! :blush:

  2. Create one or more inline HTML input tags (my use case involves radio buttons), with appropriate id and name attributes.

  3. Create HTML label tags with appropriate for attributes to match the id attributes of the input tags. Include any desired text content in the label tags.

  4. Change Editor mode to Live Preview if not already enabled.

  5. Change the note to reading mode.

  6. Click on any of the displayed label areas.

Addendum: it appears on more thorough testing that the bug only happens after having interacted via click or keyboard with any text in the note in editing mode, or after toggling in and out of editing/reading mode while one of the radio buttons is :checked.

Expected result

Normally, clicking on a label area will perform the action associated with the bound input tag, which in the case of a radio button would be to toggle that radio button to :checked (or apply a custom attribute to the element, depending).

e.g.
Obsidian_uWIq0Dex2r

Actual result

Instead of the correct behavior, the labels fail to defer to the associated input element. Additional, an error is thrown in the console.

e.g.
Obsidian_h0TOm6VsN8

Error:

TypeError: Cannot read property 'top' of null
    at l (app.js:1)
    at w (app.js:1)
    at app.js:1
    at app.js:1
    at Array.map (<anonymous>)
    at e.readPos (app.js:1)
    at app.js:1
    at Array.map (<anonymous>)
    at e.measure (app.js:1)
    at app.js:1

Obsidian_stF8PEaJOp
Obsidian_stF8PEaJOp820×432 11 KB

Environment

  • Operating system: Windows 10 Home 64-bit (10.0, Build 19043)
  • Debug info:
SYSTEM INFO:
	Obsidian version: v0.14.6
	Installer version: v0.12.19
	Operating system: Windows 10 Home 10.0.19043
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: none
	Snippets enabled: 2
	Safe mode: off
	Plugins installed: 35
	Plugins enabled: 0

RECOMMENDATIONS:
	Custom theme: for cosmetic issues, please first try updating your theme to latest. If still not fixed, please try to make the issue happen in the help vault or disable community theme and snippets.

Additional information

Markdown/HTML used in above example:

<input type="radio" id="test1" name="test">  
<label for="test1">Please</label>  
<input type="radio" id="test2" name="test">  
<label for="test2">Help</label>

i’m happy to provide any additional context or attempt any tests that may be required to help address this issue. Thank you so much for your time!

2

we don’t support this. Open a feature request.