jslink raises JS-error for TextInput

[rhambach]

ALL software version info

panel 1.2.1 bokeh 3.1.1 Edge browser Version 115.0.1901.200 example running from VSC in a Jupyter notebook

Description of expected behavior and the observed behavior

The example from https://panel.holoviz.org/how_to/links/jslinks.html using jslink on a TextInput widget could not be reproduced. The Markdown text does not update.

Complete, minimal, self-contained example code that reproduces the issue

import panel as pn
pn.extension()

markdown = pn.pane.Markdown('Markdown display')
text_input = pn.widgets.TextInput(value=markdown.object)

# does not work
link = text_input.jslink(markdown, value='object')

pn.Row(text_input, markdown).show()

Stack traceback and/or browser JavaScript console output

browser console output

Uncaught ReferenceError: None is not defined
    at o.eval (eval at get func (bokeh.min.js?v=c8d721b...:459:251), <anonymous>:7:5)
    at i.execute (bokeh.min.js?v=c8d721b...:459:333)
    at o.<anonymous> (bokeh.min.js?v=c8d721b...:215:1488)
    at c.emit (bokeh.min.js?v=c8d721b...:180:757)
    at c.emit (bokeh.min.js?v=c8d721b...:180:842)
    at o._setv (bokeh.min.js?v=c8d721b...:179:5512)
    at o.setv (bokeh.min.js?v=c8d721b...:179:5994)
    at o.set [as value] (bokeh.min.js?v=c8d721b...:179:1168)
    at c.change_input (bokeh-widgets.min.js?v=2c2c4d...:52:1115)
    at HTMLInputElement.<anonymous> (bokeh-widgets.min.js?v=2c2c4d4...:52:1007)

workarounds

• using a JS-snippet in jslink works correctly

code = '''target.text = '<b>' + source.value + '</b>' '''
link = text_input.jslink(markdown, code={'value': code})

• using pn.link works also correctly

[MarcSkovMadsen]

I can reproduce

[zhnext]

Why this simple bug hasn't been fixed yet, which so obvious. I can provide generated Javascript for debugging: (function anonymous(bidirectional,properties,source,target,cb_obj,cb_data,cb_context ) { 'use strict';

var value = source['value'];
value = value;
value = None;
try {
  var property = target.properties['object'];
  if (property !== undefined) { property.validate(value); }
} catch(err) {
  console.log('WARNING: Could not set object on target, raised error: ' + err);
  return;
}
try {
  target['object'] = value;
} catch(err) {
  console.log(err)
}

})

[hoxbro]

You are welcome to fix the simple bug :+1:

[zhnext]

I'd like to. Would you please give me some code location hints

[hoxbro]

I'm not sure, but you could try play around with _source_transforms and _target_transforms around here:

https://github.com/holoviz/panel/blob/3febd336cd4c22dc97d214b1408f63dd10f55242/panel/widgets/input.py#L94

[philippjfr]

I don't think this is fixable in it's current form, the problem being that the Markdown transforms happen on the Python side. If we performed the Markdown conversion on the client side this would indeed be trivial.

[philippjfr]

Don't see a JS error anymore though.