Material: Is there a way to enable keyboard-input on md-select? like a combobox

[icenold]

[topherfangio]

Not sure what your use-case is, but you may be interested in the following PR which we plan to merge soon: https://github.com/angular/material/pull/7782

If you can provide a bit more info, we can provide a better answer :smile:

[icenold]

actually my goal is to make a combobox

[DerekLouie]

I believe this PR will let you achieve that (as well as #7906 which will give you a close example implementation).

Our intent on building these things were for use cases that don't quite fit the autocomplete directive.

Just for the sake of getting an outside developer's POV @icenold (it's always nice to have some external validation when building new components aha), would this new select header/filter component address your problem differently than the autocomplete directive?

[icenold]

thanks for the reply,
I think #7906 is close to getting my answer :+1:
Except my scenario does not need any filtering
The situation is like this:
-the input will have the dropdown items like the one in md-select
-the user however is not restricted to only choose items from the dropdown
-the user can either choose from the dropdown like in md-select OR he also has the freedom to type in his own value

[DerekLouie]

Ohh very interesting, I definitely thing the md-select-header PR will allow you to do that (it bypasses the 'only _one_ input' check).

When you can put an input in the md-select directive, I think your code can read whatever value is in the input on submit (assuming if you select an option, that will populate the input and overwrite anything the user has typed).

One thing to be noted though, is that the md-select steals keystrokes with for ' quick select' behavior. The demo in #7906 overrides this behavior (by using stopPropagation).

Glad to see the md-select input bypass in the header will be helpful. #7782 I think will give you what you need for the combo box!

[icenold]

something like this :)

   <style>
        .combocontainer{
            width:200px;
            display:inline;
        }
        .comboinput {
            position:relative;
            top:-3px;
            left:-2.75em;
        }
        .comboinput div._md-text{
            display:none !important;
        }
        .comboinput md-select-value:not([disabled]):focus ._md-select-value{
            border-bottom:none;
        }
        .comboinput md-select-value{
            min-width: 0.0em;
            border-bottom:none !important;
        }
    </style>
    <div class="combocontainer">
        <md-input-container>
            <label>combobox1</label>
            <input type="text" ng-model="chosen"/>
        </md-input-container>
        <md-input-container class="comboinput">
            <md-select ng-model="chosen" md-container-class="combomenu">
                <md-option ng-value="'item 1'">item 1</md-option>
                <md-option ng-value="'item 2'">item 2</md-option>
                <md-option ng-value="'item 3'">item 3</md-option>
            </md-select>
        </md-input-container>
    </div>
    <div class="combocontainer">
        <md-input-container>
            <label>combobox2</label>
            <input type="text" ng-model="chosen2" />
        </md-input-container>
        <md-input-container class="comboinput">
            <md-select ng-model="chosen2" md-container-class="combomenu">
                <md-option ng-value="'item 1'">item 1</md-option>
                <md-option ng-value="'item 2'">item 2</md-option>
                <md-option ng-value="'item 3'">item 3</md-option>
            </md-select>
        </md-input-container>
    </div>

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.