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.
Open a note in Obsidian!
Create one or more inline HTML input tags (my use case involves radio buttons), with appropriate
Create HTML label tags with appropriate
forattributes to match the
idattributes of the input tags. Include any desired text content in the label tags.
Change Editor mode to Live Preview if not already enabled.
Change the note to reading mode.
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
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).
Instead of the correct behavior, the labels fail to defer to the associated input element. Additional, an error is thrown in the console.
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
- 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.
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!