@justeattakeaway/pie-textarea 0.16.7 → 0.16.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -0
- package/dist/index.js +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -22,6 +22,8 @@
|
|
|
22
22
|
- [Example](#example)
|
|
23
23
|
- [Displaying error messages](#displaying-error-messages)
|
|
24
24
|
- [Usage Examples](#usage-examples)
|
|
25
|
+
- [Pitfalls](#pitfalls)
|
|
26
|
+
- [Controlled input values](#controlled-input-values)
|
|
25
27
|
- [Questions and Support](#questions-and-support)
|
|
26
28
|
- [Contributing](#contributing)
|
|
27
29
|
|
|
@@ -173,6 +175,28 @@ import { PieTextarea } from '@justeattakeaway/pie-webc/react/textarea.js';
|
|
|
173
175
|
</PieTextarea>
|
|
174
176
|
```
|
|
175
177
|
|
|
178
|
+
## Pitfalls
|
|
179
|
+
|
|
180
|
+
### Controlled input values
|
|
181
|
+
|
|
182
|
+
If we want to add a constraint to what the user can input, then on input/change we perform the condition check and if it succeeds, update the input value. If it fails, then manually assign event.target.value to the last known valid input to prevent it from updating.
|
|
183
|
+
|
|
184
|
+
> This will need to be done regardless of application framework used.
|
|
185
|
+
|
|
186
|
+
Example:
|
|
187
|
+
|
|
188
|
+
```js
|
|
189
|
+
const onInput = (event) => {
|
|
190
|
+
// For example, users can type only uppercase letters
|
|
191
|
+
const value = event.target.value
|
|
192
|
+
if (value === value.toUpperCase()) {
|
|
193
|
+
inputValue.value = value
|
|
194
|
+
} else {
|
|
195
|
+
event.target.value = inputValue.value
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
```
|
|
199
|
+
|
|
176
200
|
## Questions and Support
|
|
177
201
|
|
|
178
202
|
If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
|
package/dist/index.js
CHANGED
|
@@ -10,7 +10,7 @@ const _ = class _ extends D {
|
|
|
10
10
|
this.getAttribute("v") || this.setAttribute("v", _.v);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
-
_.v = "0.16.
|
|
13
|
+
_.v = "0.16.9";
|
|
14
14
|
let w = _;
|
|
15
15
|
var $ = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
|
|
16
16
|
function Z(e) {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-textarea",
|
|
3
3
|
"description": "PIE Design System Textarea built using Web Components",
|
|
4
|
-
"version": "0.16.
|
|
4
|
+
"version": "0.16.9",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
42
|
"@justeattakeaway/pie-components-config": "0.20.1",
|
|
43
|
-
"@justeattakeaway/pie-css": "0.
|
|
43
|
+
"@justeattakeaway/pie-css": "0.17.2",
|
|
44
44
|
"@justeattakeaway/pie-monorepo-utils": "0.5.1",
|
|
45
45
|
"@types/lodash.throttle": "4.1.9",
|
|
46
46
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@justeattakeaway/pie-assistive-text": "0.10.
|
|
49
|
+
"@justeattakeaway/pie-assistive-text": "0.10.8",
|
|
50
50
|
"@justeattakeaway/pie-webc-core": "1.0.0",
|
|
51
51
|
"lodash.throttle": "4.1.1"
|
|
52
52
|
},
|