Skip to content

Commit

Permalink
fix(number-input): prevent form submission (#1748)
Browse files Browse the repository at this point in the history 
add type='button' to all number-input controls
prevent forms containing number-input elements
from being submitted prematurely

closes #1747
  • Loading branch information
@StephenHogsten @asudoh
StephenHogsten authored and asudoh committed Feb 8, 2019
1 parent 48f40f1 commit 17c3b3d
Show file tree
Hide file tree
Showing 2 changed files with 1,175 additions and 22 deletions.
44 changes: 22 additions & 22 deletions src/components/number-input/number-input.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<label for="number-input0" class="{{@root.prefix}}--label">Number Input label</label>
<input id="number-input0" type="number" min="0" max="100" value="1">
<div class="{{@root.prefix}}--number__controls">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon" type="button">
{{#if @root.featureFlags.componentsX}}
{{ carbon-icon 'CaretUpGlyph' }}
{{else}}
Expand All @@ -19,7 +19,7 @@
</svg>
{{/if}}
</button>
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon">
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon" type="button">
{{#if @root.featureFlags.componentsX}}
{{ carbon-icon 'CaretDownGlyph' }}
{{else}}
Expand All @@ -40,23 +40,23 @@
<input id="number-input1" type="number" min="0" max="100" value="1">
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--number__invalid')}}
<div class="{{@root.prefix}}--number__controls">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon" type="button">
{{ carbon-icon 'CaretUpGlyph' }}
</button>
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon">
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon" type="button">
{{ carbon-icon 'CaretDownGlyph' }}
</button>
</div>
</div>
{{else}}
<input id="number-input1" type="number" min="0" max="100" value="1">
<div class="{{@root.prefix}}--number__controls">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon" type="button">
<svg width="10" height="5" viewBox="0 0 10 5">
<path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
</svg>
</button>
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon">
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon" type="button">
<svg width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
Expand All @@ -76,23 +76,23 @@
<input id="number-input2" type="number" min="0" max="100" value="1">
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--number__invalid')}}
<div class="{{@root.prefix}}--number__controls">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon" type="button">
{{ carbon-icon 'CaretUpGlyph' }}
</button>
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon">
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon" type="button">
{{ carbon-icon 'CaretDownGlyph' }}
</button>
</div>
</div>
{{else}}
<input id="number-input2" type="number" min="0" max="100" value="1">
<div class="{{@root.prefix}}--number__controls">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon" type="button">
<svg width="10" height="5" viewBox="0 0 10 5">
<path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
</svg>
</button>
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon">
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon" type="button">
<svg width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
Expand All @@ -115,23 +115,23 @@
<div class="{{@root.prefix}}--number__input-wrapper">
<input id="number-input3" type="number" min="0" max="100" value="1">
<div class="{{@root.prefix}}--number__controls">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon" type="button">
{{ carbon-icon 'CaretUpGlyph' }}
</button>
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon">
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon" type="button">
{{ carbon-icon 'CaretDownGlyph' }}
</button>
</div>
</div>
{{else}}
<input id="number-input3" type="number" min="0" max="100" value="1">
<div class="{{@root.prefix}}--number__controls">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon" type="button">
<svg width="10" height="5" viewBox="0 0 10 5">
<path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
</svg>
</button>
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon">
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon" type="button">
<svg width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
Expand All @@ -157,23 +157,23 @@
<input id="number-input4" type="number" min="0" max="100" value="1">
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--number__invalid')}}
<div class="{{@root.prefix}}--number__controls">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon" type="button">
{{ carbon-icon 'CaretUpGlyph' }}
</button>
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon">
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon" type="button">
{{ carbon-icon 'CaretDownGlyph' }}
</button>
</div>
</div>
{{else}}
<input id="number-input4" type="number" min="0" max="100" value="1">
<div class="{{@root.prefix}}--number__controls">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon" type="button">
<svg width="10" height="5" viewBox="0 0 10 5">
<path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
</svg>
</button>
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon">
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon" type="button">
<svg width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
Expand Down Expand Up @@ -202,23 +202,23 @@
<input id="number-input4" type="number" min="0" max="100" value="1">
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--number__invalid')}}
<div class="{{@root.prefix}}--number__controls">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon" type="button">
{{ carbon-icon 'CaretUpGlyph' }}
</button>
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon">
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon" type="button">
{{ carbon-icon 'CaretDownGlyph' }}
</button>
</div>
</div>
{{else}}
<input id="number-input4" type="number" min="0" max="100" value="1">
<div class="{{@root.prefix}}--number__controls">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon">
<button aria-label="increase number input" class="{{@root.prefix}}--number__control-btn up-icon" type="button">
<svg width="10" height="5" viewBox="0 0 10 5">
<path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
</svg>
</button>
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon">
<button aria-label="decrease number input" class="{{@root.prefix}}--number__control-btn down-icon" type="button">
<svg width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
Expand Down
Loading

0 comments on commit 17c3b3d

Please sign in to comment.