bug: Props drilling coerces None values to empty strings
JuroOravec opened this issue · 0 comments
Imagine I pass a prop to a component, and that component just passes the prop through to another component. The inner component has a default specified. The outer component doesn't specify any defaults.
In this case, I would expect that, when I don't pass the prop to the outer component, then the inner component should render the default value, because it shouldn't be passed anything from its parent.
However, what I observe is that the inner component receives an empty string, and hence doesn't use the default value.
Consider this example:
page.html
<div class="layout">
Layout!
{% outer %}
</div>
outer.html
---
props.types = {
'my_prop': Optional[str],
}
props.defaults = {}
print('OUTER: ', props['my_prop'])
print('OUTER_TYPE: ', type(props['my_prop']))
---
<div>
outer!
{% inner the_prop=my_prop %}
</div>
inner.html
---
props.types = {
'the_prop': Optional[str],
}
props.defaults = {
'the_prop': 'bamboozle',
}
print('INNER: ', props['the_prop'])
print('INNER_TYPE: ', type(props['the_prop']))
---
<h3>
inner!
{{ the_prop }}
</h3>
Since I didn't set the my_prop
for outer
, then I would expect that inner
would render bamboozle
, and hence the whole output would be:
<div class="layout">
Layout!
<div>
outer!
<h3>
inner!
bamboozle
</h3>
</div>
</div>
However, instead the the_prop
is an empty string, so I get:
<div class="layout">
Layout!
<div>
outer!
<h3>
inner!
</h3>
</div>
</div>
When rendered, the above prints:
OUTER: None
OUTER_TYPE: <class 'NoneType'>
INNER:
INNER_TYPE: <class 'str'>
EDIT: Added print statements.