FileSelector not working inside Template

I can not seem to make File Selector work as part of a template.

import panel as pn # 1.8.2

pn.extension()

class FileSelectorDebug(pn.viewable.Viewer):
    def __init__(self, **params):
        super().__init__(**params)
        self.file_selector = pn.widgets.FileSelector(
            name="Select files",
            directory="~",
        )
    
    def __panel__(self):
        # This works
        return self.file_selector

        # This results in a frozen Widget (can not interact with it)
        # return pn.template.MaterialTemplate(
        #     header_background="#FFA500",
        #     logo="https://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-en.svg",
        #     site="File Selector Debug",
        #     title="File Selector Debug",
        #     sidebar=[self.file_selector],
        # )

FileSelectorDebug().servable()

This also applies to TextInput seemingly, but not if I deploy the app.

When I run your code with panel serve .\test.py --show it is working properly. The only issue I get is since the FileSelector is within the sidebar, I do not see everything but when I add in the constructor

self.file_selector.param.watch(print, "value")

I get the event printed in the console. And when I move the FileSelector to the main part of the template, I have the component displayed properly and working as expected.

Do you have any warning or error on your console in your web browser ?

Turns out this was a Jupyter Base env version conflict with Jupyter Kernel version issue.