Develop Reference

HTML input not updating on paste

I'm trying to capture the value of whatever is pasted into a text input, but it's not showing up in the text input for some reason
import React from "react";
export default function App() {
handleOnPaste = e => {
e.stopPropagation();
e.preventDefault();
const clipboardData = e.clipboardData || window.clipboardData;
const pastedData = clipboardData.getData("Text");
console.log(pastedData);
};
return (
<div className="App">
<input
type="text"
onPaste={e => this.handleOnPaste(e)}
/>
</div>
);
}

It is working, just declare the function in a proper way like,
const handleOnPaste = e => {
e.stopPropagation();
e.preventDefault();
const clipboardData = e.clipboardData || window.clipboardData;
const pastedData = clipboardData.getData("Text");
console.log(pastedData);
};

I. declare your function with const
const handleOnPaste = e => {
// Implementation
}
II. pass your function without this because this is a function component, not a class component.
return (
<div className="App">
<input
type="text"
onPaste={e => handleOnPaste(e)}
/>
</div>
);
You can also pass your function like:
onPaste={handleOnPaste}

As mentioned in other answers, you are mixing class based component's concepts in functional component. So use const to define handlers and don't use this.
See Working demo.
FYI - You can also use navigator.clipboard
Code snippet
export default function App() {
const handleOnPaste = e => {
e.stopPropagation();
// First way
const clipboardData = e.clipboardData || window.clipboardData;
const pastedData = clipboardData.getData("Text");
console.log(pastedData);
// Another way -- navigator.clipboard
navigator.clipboard.readText().then(copiedText => console.log('copiedText', copiedText));
};
return (
<div className="App">
<input
type="text"
onPaste={handleOnPaste}
/>
</div>
);
}

Your e.preventDefault() is what's stopping the input from updating. It's unnecessary if you're happy for the field to update

Creating a custom input field with Web Components without outside accessability

I want to create a custom input with the Shadow DOM
class TextBox extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow({ mode: 'open' });
let textbox = document.createElement("input");
shadow.appendChild(textbox);
textbox.addEventListener("change", validate);
function validate(event) {
console.log("input can be validated");
}
}
get value() {
console.log("get");
let textbox = this.shadowRoot.querySelector("input");
return textbox.value;
}
set value(newValue) {
console.log("set");
let textbox = this.shadowRoot.querySelector("input");
textbox.value = newValue;
}
}
customElements.define('test-textbox', TextBox);
It should be possible to change the value of the displayed textbox via js. If I change the .value property of the textbox the setter of value don't get called? Am i missing something?
Later on I want to include the textbox via a template in my solution and be able to set the value of the textbox via textbox.value ="Peter"

The internal <input> field dispatches the input event every time its value changes. This event can be captured either in your component or by the code that uses your component.
The change event only happens in certain situations so the input event is a better choice.
The code below shows how the component listens for the input event and so does the external code.
function validate(event) {
console.log("input can be validated");
}
class TextBox extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>
input {
width: 300px;
}
</style>
`;
const textbox = document.createElement("input");
shadow.appendChild(textbox);
textbox.addEventListener("input", validate);
textbox.focus();
}
get value() {
console.log("get");
let textbox = this.shadowRoot.querySelector("input");
return textbox.value;
}
set value(newValue) {
console.log("set");
let textbox = this.shadowRoot.querySelector("input");
textbox.value = newValue;
}
}
customElements.define('test-textbox', TextBox);
const el = document.querySelector('test-textbox');
el.addEventListener("input", (evt) => {
console.log('input event from the outside.');
});
<test-textbox></test-textbox>

Mobile browser issue with textarea resize

I am working in React.js and have textarea elements that dynamically expand and contract based on the size of the user's input. The intended functionality is as follows:
This works correctly in a desktop context. However, on any mobile or tablet in a modern browser (tested Safari, Chrome and Firefox) the textarea element only expands, it does not contract when content is deleted.
At first I thought it might have something to do with the onChange handler I was employing, however, the same issue remains when swapping it out with an onInput handler. So I believe the issue resides in the resize() method.
Does anyone have an idea of why I'm experiencing this issue?
I have created a style-free fiddle to share with you the basic functionality. Interestingly, the bug doesn't occur in the JSFiddle simulator on a mobile device, but if you take the same code and put it in another react environment, the bug occurs on a mobile device in modern browsers.
class Application extends React.Component {
render() {
return (
<div>
<Textarea value="This is a test" maxLength={500}/>
</div>
);
}
}
class Textarea extends React.Component {
constructor(props) {
super(props);
this.state = {
value: this.props.value
? this.props.maxLength && this.props.maxLength > 0
? this.props.value.length < this.props.maxLength
? this.props.value
: this.props.value.substring(0, this.props.maxLength)
: this.props.value
: '',
remaining: this.props.value
? this.props.value.length < this.props.maxLength
? this.props.maxLength - this.props.value.length
: 0
: this.props.maxLength
};
this.textAreaRef = React.createRef();
this.textAreaHeight = null;
this.textAreaoffSetHeight = null;
}
componentDidMount() {
window.addEventListener('resize', this.resize);
this.resize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
}
handleChange = event => {
const target = event.target || event.srcElement;
this.setState({
value: target.value,
remaining: target.value
? target.value.length < this.props.maxLength
? this.props.maxLength - target.value.length
: 0
: this.props.maxLength
});
this.resize();
};
resize = () => {
const node = this.textAreaRef.current;
node.style.height = '';
const style = window.getComputedStyle(node, null);
let heightOffset =
parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
this.textAreaoffSetHeight = node.offsetTop;
this.textAreaHeight = node.scrollHeight + heightOffset;
node.style.height = this.textAreaHeight + 'px';
this.resizeBorder();
this.resizeParentNode();
};
resizeBorder = () => {
const textAreaSize = this.textAreaHeight;
const node = this.textAreaRef.current;
const borderNode = node.parentNode.querySelector(
'.textarea__border'
);
if (borderNode !== null) {
borderNode.style.top =
this.textAreaoffSetHeight + textAreaSize - 1 + 'px';
}
};
resizeParentNode = () => {
const node = this.textAreaRef.current;
const parentNode = node.parentNode;
if (parentNode !== null) {
parentNode.style.height = this.textAreaHeight + 40 + 'px';
}
};
render() {
return (
<div className={'textarea'}>
<textarea
ref={this.textAreaRef}
className={
!this.state.value
? 'textarea__input'
: 'textarea__input active'
}
value={this.state.value}
maxLength={
this.props.maxLength && this.props.maxLength > 0 ? this.props.maxLength : null
}
onChange={this.handleChange}
/>
<div className={'textarea__message'}>
{this.state.remaining <= 0
? `You've reached ${this.props.maxLength} characters`
: `${this.state.remaining} characters remaining`}
</div>
</div>
);
}
}
ReactDOM.render(
<Application />,
document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main id="app">
<!-- This element's contents will be replaced with your component. -->
</main>

The issue is that you're modifying the DOM directly (or trying to) instead of modifying state and allowing React to flow properly. You modify the DOM elements properties in resize() then any input change will immediate call handleChange(e) and re-flow your DOM overwriting the modifications.
NEVER MIX REACT WITH DOM TOUCHING!!!
Change your resize function to behave like your handleChange(e) function and set variables within the state which control those properties during the render() of the mark-up.

Change the cursor position in a textarea with React

I have a textarea in React that I want to turn into a "notepad". Which means I want the "tab" key to indent instead of unfocus. I looked at this answer, but I can't get it to work with React. Here is my code:
handleKeyDown(event) {
if (event.keyCode === 9) { // tab was pressed
event.preventDefault();
var val = this.state.scriptString,
start = event.target.selectionStart,
end = event.target.selectionEnd;
this.setState({"scriptString": val.substring(0, start) + '\t' + val.substring(end)});
// This line doesn't work. The caret position is always at the end of the line
this.refs.input.selectionStart = this.refs.input.selectionEnd = start + 1;
}
}
onScriptChange(event) {
this.setState({scriptString: event.target.value});
}
render() {
return (
<textarea rows="30" cols="100"
ref="input"
onKeyDown={this.handleKeyDown.bind(this)}
onChange={this.onScriptChange.bind(this)}
value={this.state.scriptString}/>
)
}
When I run this code, even if I press the "tab" key in the middle of the string, my cursor always appears at the end of the string instead. Anyone knows how to correctly set the cursor position?

You have to change the cursor position after the state has been updated(setState() does not immediately mutate this.state)
In order to do that, you have to wrap this.refs.input.selectionStart = this.refs.input.selectionEnd = start + 1; in a function and pass it as the second argument to setState (callback).
handleKeyDown(event) {
if (event.keyCode === 9) { // tab was pressed
event.preventDefault();
var val = this.state.scriptString,
start = event.target.selectionStart,
end = event.target.selectionEnd;
this.setState(
{
"scriptString": val.substring(0, start) + '\t' + val.substring(end)
},
() => {
this.refs.input.selectionStart = this.refs.input.selectionEnd = start + 1
});
}
}
jsfiddle

For anyone looking for a quick React Hooks (16.8+) cursor position example:
import React, { useRef } from 'react';
export default () => {
const textareaRef = useRef();
const cursorPosition = 0;
return <textarea
ref={textareaRef}
onBlur={() => textareaRef.current.setSelectionRange(cursorPosition, cursorPosition)}
/>
}
In this example, setSelectionRange is used to set the cursor position to the value of cursorPosition when the input is no longer focused.
For more information about useRef, you can refer to React's official doc's Hook Part.

Here's a solution in a hooks-style architecture. My recommendation is to change the textarea value and selectionStart immediately on tab insertion.
import React, { useRef } from "react"
const CodeTextArea = ({ onChange, value, error }) => {
const textArea = useRef()
return (
<textarea
ref={textArea}
onKeyDown={e => {
if (e.key === "Tab") {
e.preventDefault()
const { selectionStart, selectionEnd } = e.target
const newValue =
value.substring(0, selectionStart) +
" " +
value.substring(selectionEnd)
onChange(newValue)
if (textArea.current) {
textArea.current.value = newValue
textArea.current.selectionStart = textArea.current.selectionEnd =
selectionStart + 2
}
}
}}
onChange={e => onChange(e.target.value)}
value={value}
/>
)
}

In React 15 best option is something like that:
class CursorForm extends Component {
constructor(props) {
super(props);
this.state = {value: ''};
}
handleChange = event => {
// Custom set cursor on zero text position in input text field
event.target.selectionStart = 0
event.target.selectionEnd = 0
this.setState({value: event.target.value})
}
render () {
return (
<form>
<input type="text" value={this.state.value} onChange={this.handleChange} />
</form>
)
}
}
You can get full control of cursor position by event.target.selectionStart and event.target.selectionEnd values without any access to real DOM tree.

Two way data binding using div

I am working with reactjs with redux.
i have created an editable div instead of input textfield but unable to receive the value.
So, in input textfield. There is a event named onChange which let you access the value type in input field.
For example -
handlechange(e){
console.log(e.target.value); //get the value of textbox then i further save it in state
}
render()
{
return (
<input
onChange={this.handleChange.bind(this)}
value={this.state.msgText}
</>
)}
But I am using the editable div for same like this
<div
role="textbox"
ref={function(e){if(e != null) e.contentEditable=true;}}
title="Type the text"
//onChange={this.handleChange.bind(this)}
onKeyUp={this.handleKeyUp.bind(this)}
>
{this.state.msgText}
</div>
So , in handleKeyUp function
handleKeyUp(e){
var t = this;
console.log('test');
console.log(e);
console.log(e.target.value); // I have read ,i can only receive the keycode here,cannot receive value
console.log(this.state.msgText); //So i should receive the value here but i am not
if(e.which == 13) {
e.preventDefault();
//reset the state for clear the div
t.setState({
msgText: ""
});
}
}
Once way of doing this is adding id on div like this -
<div
id={"fc-"+ this.props.thread.uid + "-textbox"}
role="textbox"
className="ifc-chat-window-textbox-input"
ref={function(e){if(e != null) e.contentEditable=true;}}
title="Type the text"
//onChange={this.handleChange.bind(this)}
//onKeyUp={this.handleKeyUp.bind(this)}
>
{this.state.msgText}
</div>
Then in componentDidMount function
componentDidMount(){
var t = this;
var node = document.getElementById("fc-"+ this.props.thread.uid + "-textbox");
var value = node.textContent; // I receive the value here
node.onkeypress = function(event){
t.setState({
msgText: node.textContent
}); });
if(event.which == 13) {
event.preventDefault();
t.sendMsgObject(value , t.props.thread.uid, t.props.thread.name, t.props.thread.color, t.props.actions, t.props.user);
//reset the state for clear input field
t.setState({
msgText: ""
});
}
All this works fine, but i dont think that is how things works in react. I am looking do to this without using id to div.

have u tried something like that ?
var handleChange = function(event){
this.setState({html: event.target.value});
}.bind(this);
return (<ContentEditable html={this.state.html} onChange={handleChange} />);
ContentEditable class
var ContentEditable = React.createClass({
render: function(){
return <div
onInput={this.emitChange}
onBlur={this.emitChange}
contentEditable
dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
},
shouldComponentUpdate: function(nextProps){
return nextProps.html !== this.getDOMNode().innerHTML;
},
emitChange: function(){
var html = this.getDOMNode().innerHTML;
if (this.props.onChange && html !== this.lastHtml) {
this.props.onChange({
target: {
value: html
}
});
}
this.lastHtml = html;
}
});