How to use input field as custom entry in ?

Question

I'm trying to create a form using Angular Material which allows user to select number of items per page (loaded from DB, or whatever). I want to have most popular choices (e.g. 10, 20, All) always visible and accessible with a single mouse click, so no drop-down list or slider. However I also want the user to have the freedom to specify custom value through an input field (see image below).

I created following JSFiddle: http://jsfiddle.net/p55sx0zy/

However there is a problem. Input field cannot be focused with mouse, instead radio button is selected and I need to press TAB to focus the input field. When I do that and change the value radio button gets unselected. Then when I press this 4th radio button again the proper value is reported.

I'd like this input to be focusable with mouse and the radio button to remain selected while input is being modified. Is it possible to achieve such design at all with Angular Material?

Answer 1

CSS is preventing the input from being interacted with.

md-radio-button .md-label, .md-switch-thumb .md-label {
    ...
    pointer-events: none;
}

You can just override the style:

HTML:

<md-radio-button ng-if="option.input" value="{{ctrl.perPageCustom}}" class="md-primary md-radio-interactive">
    <input ng-model="ctrl.perPageCustom" /> (Custom)
</md-radio-button>

CSS:

.md-radio-interactive input {
    pointer-events: all;
}

Modified fiddle: http://jsfiddle.net/langdonx/p55sx0zy/1/

You'll have to change you tack on how you're storing the custom value so the radio stays selected though.