pattern attribute for language propery is invalid

[ericscheid]

Currently, the input for the Language property is:

<input title="" pattern="/.+/" placeholder="en" type="text" value="">

That pattern is bad. The slashes should not be there (it's html, not javascript). It looks like that's the default pattern value from our function.

It should be more like this:

pattern="^[a-z]{2,3}(-[A-Z][a-z]{3})?(-[A-Z]{2})?$"

That, btw, also allows for the rare 3 letter regions, 4 letter scripts (e.g. Hant for traditional Chinese), and then the final 2 letter language. (We have both in the example drop-list for the input).

---

The default pattern attribute value is defined here, as a javascript literal, but should be as a string, and looks to be inserted as a string of the literal js regex:

homebrewery/client/components/combobox.jsx

Line 20 in 989ac07

valuePatterns : /.+/

The custom combobox for language is defined here, it looks to be using the default combobox pattern (which is itself bugged), should have pattern="^[a-z]{2,3}(-[A-Z][a-z]{3})?(-[A-Z]{2})?$" inserted.

homebrewery/client/homebrew/editor/metadataEditor/metadataEditor.jsx

Lines 257 to 278 in 989ac07

	return <div className='field language'>
	<label>language</label>
	<div className='value' data-tooltip-right='Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.'>
	<Combobox trigger='click'
	className='language-dropdown'
	default={this.props.metadata.lang || ''}
	placeholder='en'
	onSelect={(value)=>this.handleLanguage(value)}
	onEntry={(e)=>{
	e.target.setCustomValidity(''); //Clear the validation popup while typing
	this.handleFieldChange('lang', e);
	}}
	options={listLanguages()}
	autoSuggest={{
	suggestMethod : 'startsWith',
	clearAutoSuggestOnClick : true,
	filterOn : ['value', 'detail', 'title']
	}}
	/>
	</div>
	</div>;

The above 2 suggestions modulo a better understanding of React. I don't even know the assumed syntax for valuePatterns.

[ericscheid]

An easy fix, yes?