ant-design when double click the cell text to select, there will be a tab space when pasting

hec6srdp  于 2022-10-23  发布在  其他
关注(0)|答案(4)|浏览(150)
  • I have searched the issues of this repository and believe that this is not a duplicate.

14475 (comment)

Steps to reproduce

14475 (comment)

What is expected?

no spaces when pasting

What is actually happening?

there are spaces when pasting

EnvironmentInfo
antd4.9.3
React16.14.0
Systemmac
Browserchrome 87.0.4280.88
mjqavswn

mjqavswn1#

Hello @shenzhim. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @shenzhim, 我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的 预设模板 ,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献!

nxowjjhe

nxowjjhe2#

It can be considered similar to the approach of element UI

nest <div> inside <td>

@afc163

ohtdti5x

ohtdti5x3#

I am also facing this issue, it causes a lot of problems because in our product users are copy and pasting values from our table a lot and the values just have a tab in them

juud5qan

juud5qan4#

I was able to solve this the following way. I attached an ID to my <Table/> component and used a copy event listener to modify the string that gets put in the users clipboard.

const copyEventHandler = (event) => {
	const selection = document.getSelection();
	const selectionString = selection?.toString();
	if (selectionString?.endsWith("\t") || selectionString?.endsWith("\n")) {
		const tabRemoved = selectionString.slice(0, -1);
		event.clipboardData.setData("text/plain", tabRemoved);
		event.preventDefault();
	}
};

// Add the table cell copy event listener
	useEffect(() => {
		document
			.getElementById(<table_element_id_here>)
			.addEventListener("copy", copyEventHandler);
		return () => {
			document
				.getElementById(<table_element_id_here>)
				.removeEventListener("copy", copyEventHandler);
		};
	}, []);

Works well!

相关问题