@justeattakeaway/pie-textarea 0.16.8 → 0.16.9

package/README.md

@@ -22,6 +22,8 @@
     - [Example](#example)
     - [Displaying error messages](#displaying-error-messages)
 - [Usage Examples](#usage-examples)
+- [Pitfalls](#pitfalls)
+  - [Controlled input values](#controlled-input-values)
 - [Questions and Support](#questions-and-support)
 - [Contributing](#contributing)
 
@@ -173,6 +175,28 @@ import { PieTextarea } from '@justeattakeaway/pie-webc/react/textarea.js';
 </PieTextarea>
 ```
 
+## Pitfalls
+
+### Controlled input values
+
+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.
+
+> This will need to be done regardless of application framework used.
+
+Example:
+
+```js
+const onInput = (event) => {
+  // For example, users can type only uppercase letters
+  const value = event.target.value
+  if (value === value.toUpperCase()) {
+    inputValue.value = value
+  } else {
+    event.target.value = inputValue.value
+  }
+}
+```
+
 ## Questions and Support
 
 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/custom-elements.json

@@ -42,7 +42,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\r\n    disabled: false,\r\n    size: 'medium',\r\n    resize: 'auto',\r\n    value: '',\r\n    placeholder: '',\r\n    status: 'default',\r\n    autoFocus: false,\r\n    readonly: false,\r\n    required: false,\r\n}",
+          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\n    value: '',\n    placeholder: '',\n    status: 'default',\n    autoFocus: false,\n    readonly: false,\n    required: false,\n}",
           "description": "Default values for optional properties that have default fallback values in the component."
         }
       ],
@@ -230,7 +230,7 @@
                 "text": "ValidityState"
               },
               "privacy": "public",
-              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
+              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
               "readonly": true
             },
             {
@@ -251,7 +251,7 @@
                   "description": "The latest disabled state of the input."
                 }
               ],
-              "description": "Called after the disabled state of the element changes,\r\neither because the disabled attribute of this element was added or removed;\r\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
+              "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
             },
             {
               "kind": "method",
@@ -262,7 +262,7 @@
                   "text": "void"
                 }
               },
-              "description": "Called when the form that owns this component is reset.\r\nResets the value to the default value."
+              "description": "Called when the form that owns this component is reset.\nResets the value to the default value."
             },
             {
               "kind": "method",

package/dist/index.js

@@ -10,7 +10,7 @@ const _ = class _ extends D {
     this.getAttribute("v") || this.setAttribute("v", _.v);
   }
 };
-_.v = "0.16.8";
+_.v = "0.16.9";
 let w = _;
 var $ = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function Z(e) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-textarea",
   "description": "PIE Design System Textarea built using Web Components",
-  "version": "0.16.8",
+  "version": "0.16.9",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -40,7 +40,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.20.1",
-    "@justeattakeaway/pie-css": "0.17.0",
+    "@justeattakeaway/pie-css": "0.17.2",
     "@justeattakeaway/pie-monorepo-utils": "0.5.1",
     "@types/lodash.throttle": "4.1.9",
     "cem-plugin-module-file-extensions": "0.0.5"