react-component / textarea Goto Github PK

This recent PR on @types/react added onResize in DOMAttributes<T> type: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/63076/files

The onResize type is ReactEventHandler<T> | undefined;

This conflict with current type TextAreaProps which defines onResize as (size: { width: number; height: number; }) => void
(see https://github.com/react-component/textarea/blob/master/src/index.tsx#L15)

The full error is:

error TS2430: Interface 'TextAreaProps' incorrectly extends interface 'TextareaHTMLAttributes<HTMLTextAreaElement>'.
  Types of property 'onResize' are incompatible.
    Type '((size: { width: number; height: number; }) => void) | undefined' is not assignable to type 'ReactEventHandler<HTMLTextAreaElement> | undefined'.
      Type '(size: { width: number; height: number; }) => void' is not assignable to type 'ReactEventHandler<HTMLTextAreaElement>'.
        Types of parameters 'size' and 'event' are incompatible.
          Type 'SyntheticEvent<HTMLTextAreaElement, Event>' is missing the following properties from type '{ width: number; height: number; }': width, height

6 export interface TextAreaProps extends HTMLTextareaProps {

The package,json for this repo calls for [email protected].

But it uses a hook that wasn't introduced until @5.15.0.

So, I'm getting this error when building

✘ [ERROR] Could not resolve "rc-util/es/hooks/useLayoutEffect"
     node_modules/rc-textarea/es/ResizableTextArea.js:10:28:
       10 │ import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";

Ant Design support CSP via nonce in "csp" attribute of ConfigProvider. Textarea component uses inline style so nonce is not used and browser reports:

calculateNodeHeight.js:69 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-XXX'". Either the 'unsafe-inline' keyword, a hash ('sha256-+BQ4uy1Q8X6iksX2devUeYbbkg8ukCMGJSKXKhgEg9o='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

One possible solution would be use of <style> element with nonce instead of "style" attribute.

Can someone please explain what's the purpose of these lines?

问题描述

设置 autosize 属性，指定 minRows 和 maxRows。当内容超过 maxRows 就会出现滚动条。但是此时不断的输入内容，当内容发生换行，滚动条并没有自动定位到输入区域的最底部，导致正在输入的内容会被遮住一部分。
此时如果继续输入，滚动条可能才会定位到最底部。

也就是说，假设一行只能显示 10 个字符，输入到第 14 个字符的时候，会有 4 个字符被遮住，再输入第 15 个字符，才会滚动到底部，把遮住的部分显示出来。

如果单纯的设置 autosize 为布尔值，并不会出现这个问题。

期望结果

在 textarea 底部输入的时候，总能让输入的光标出现时可视区域内，不要遮住正在输入的内容。

可以降低打包体积。

react-component/tabs@7b08d5e

发个 patch。

Sometimes I can't use accents when using Safari with autoSize.

Expected behavior (Chrome):

Using Safari 15.4 on macOS 12.3:

Reproduction link

https://codesandbox.io/s/focused-tu-hlr3h1?file=/App.jsx

Steps to reproduce

When I change the value, the textarea flickers. It seemed like the height suddenly got bigger and then recovered.