Support for `<datalist>`

[andilabs]

HTML supports simply searchable select field out of the box https://www.w3schools.com/tags/tag_datalist.asp

It will be cool to have it via some widget for standard wtforms.fields.SelectField without need to use some external js like select2

just a improvment/feature idea.

[ToTru]

I saw so many, let's call it worksrounds, that I assume this were a big improvement to make code smarter.

[pibesdesistemas]

I join this request :) wtforms.fields.DataField

[PanderMusubi]

Is a PR welcomed for this wtforms.fields.DataListField?

[ToTru]

That would be the most important improvement in my opinion

[PanderMusubi]

@azmeuk I have given it two tries to implement this. However, I get stuck with some decisions I cannot make. From what to subclass and how mainly. Also, a data list can be used by several input fields. Probably there needs to be a way to indicate this.

I have identified two parameters:

• list_id, such as "browsers" in https://www.w3schools.com/tags/tag_datalist.asp
• choices, such as ["Edge", "Firefox", "Chrome", "Opera", "Safari"]

However, when choices is None, the list_id can refer to a <datalist> that was rendered by another field. Note that choices contain only single values, not the more values as is seen in a select input field.

So I better leave this to the core developers. Willing to write/expand the test code, once this has been implemented.

[PanderMusubi]

The name of the first parameter could also be (more accurate) datalist_id or (more simple) datalist.

Example usage would be:

DateListField("example1", datalist_id="7", choices=("Foo", "Bar"))
DateListField("example2", datalist_id="8", choices=["Foo", "Bar"]))
DateListField("example3", datalist_id="8")

[yurishevtsov]

I also have a use case for <datalist>-like field.
@PanderMusubi are you still blocked on implementing your possible solution? Do you have a POC implementation that you're to share? Thanks in advance!

[PanderMusubi]

I have tried two approaches, but both didn't make it into a POC. I think you or one of the core developers needs to make a start on this up to a POC.

[lverweijen]

I am not very familiar with the code of wtform, so I don't know if this is the proper way to do this, but the following works for me:

class DataStringField(StringField):
    def __init__(self, choices=(), **kwargs):
        super().__init__(**kwargs)
        self.choices = choices

        if choices:
            self.render_kw.setdefault('list', self.id + "_datalist")

    def __call__(self, **kwargs):
        res = super().__call__(**kwargs)

        if datalist_id := self.render_kw.get('list'):
            html_list = [f'<datalist id="{datalist_id}">']
            for choice in self.choices:
                html_list.append(f"<option value=\"{choice}\"/>")
            html_list.append("</datalist>")
            datalist_html = markupsafe.Markup("\n".join(html_list))
            return res + datalist_html
        else:
            return res

It can be used the same way as StringField, but it can be passed an optional parameter choices, which will be used to create a datalist.

Limitation:

• choices should be a list of strings (not of tuples). The user is still free to enter any text of their choice, so I believe that adding an id doesn't make much sense anyway.

It this can somehow inspire a proper implementation, feel free to use it.

Update: If this extension can be contributed as-is (or with some small changes) directly to StringField, let me know. Then I might create a pull request.

[lazypaddy]

Hey
Did this ever get added to the core wtforms? I tried adding it and getting errors. If I used it like this:
driver_name = DataStringField('Driver Name', validators=[InputRequired()])
I get the following error:

self.render_kw.setdefault('list', self.id + "_datalist")Open an interactive python shell in this frame
AttributeError: 'NoneType' object has no attribute 'setdefault'

If I use it like this:
driver_name = DataStringField('Driver Name', choices=['Test1', 'Test2'], validators=[InputRequired()])
I get the following error:
TypeError: __init__() got multiple values for argument 'choices'

Not sure if it matters/helps but I'm using flask-wtf==1.2.1 with wtforms==3.1.2

[lazypaddy]

After some quick debugging (and I'm no expert here), but I got it to work by changing to the following:

class DataStringField(StringField):
    def __init__(self, label=None, validators=None, choices=(), **kwargs):
        super(DataStringField, self).__init__(label, validators, **kwargs)
        self.choices = choices
        if self.render_kw is None:
                self.render_kw = {}

        if choices:
            self.render_kw.setdefault('list', self.id + "_datalist")

    def __call__(self, **kwargs):
        res = super().__call__(**kwargs)

        if datalist_id := self.render_kw.get('list'):
            html_list = [f'<datalist id="{datalist_id}">']
            for choice in self.choices:
                html_list.append(f"<option value=\"{choice}\"/>")
            html_list.append("</datalist>")
            datalist_html = markupsafe.Markup("\n".join(html_list))
            return res + datalist_html
        else:
            return res

You cannot use setdefault method of a None type dict

[lazypaddy]

Next challenge is how can you set the choices dynamically within the view?? @lverweijen any thoughts??

[lazypaddy]

I've changed it to this and it "seems" to be working...probably breaks lots of rules, but working at the minute for me

class DataStringField(StringField):
    def __init__(self, label=None, validators=None, choices=(), **kwargs):
        super(DataStringField, self).__init__(label, validators, **kwargs)
        self.choices = choices
        if self.render_kw is None:
                self.render_kw = {}
        
        self.render_kw.setdefault('list', self.id + "_datalist")

    def __call__(self, **kwargs):
        res = super().__call__(**kwargs)

        if datalist_id := self.render_kw.get('list'):
            html_list = [f'<datalist id="{datalist_id}">']
            for choice in self.choices:
                html_list.append(f"<option value=\"{choice}\"/>")
            html_list.append("</datalist>")
            datalist_html = markupsafe.Markup("\n".join(html_list))
            return res + datalist_html
        else:
            return res