Skip to content

fix(ClipboardCopy): keep caret position when typing in expanded block #9772

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 1 commit into from
Nov 3, 2023
Merged

fix(ClipboardCopy): keep caret position when typing in expanded block #9772

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 25 additions & 12 deletions packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,10 @@ export enum ClipboardCopyVariant {
}

export interface ClipboardCopyState {
text: string | number;
text: string;
expanded: boolean;
copied: boolean;
textWhenExpanded: string;
}

export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
Expand Down Expand Up @@ -72,7 +73,7 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
/** A function that is triggered on clicking the copy button. */
onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
/** A function that is triggered on changing the text. */
onChange?: (event: React.FormEvent, text?: string | number) => void;
onChange?: (event: React.FormEvent, text?: string) => void;
/** The text which is copied. */
children: React.ReactNode;
/** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
Expand All @@ -88,12 +89,12 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
timer = null as number;
constructor(props: ClipboardCopyProps) {
super(props);
const text = Array.isArray(this.props.children) ? this.props.children.join('') : (this.props.children as string);
this.state = {
text: Array.isArray(this.props.children)
? this.props.children.join('')
: (this.props.children as string | number),
text,
expanded: this.props.isExpanded,
copied: false
copied: false,
textWhenExpanded: text
};
}

Expand All @@ -119,7 +120,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
// eslint-disable-next-line @typescript-eslint/no-unused-vars
componentDidUpdate = (prevProps: ClipboardCopyProps, prevState: ClipboardCopyState) => {
if (prevProps.children !== this.props.children) {
this.setState({ text: this.props.children as string | number });
this.setState({ text: this.props.children as string });
}
};

Expand All @@ -136,11 +137,16 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
}));
};

updateText = (event: React.FormEvent, text: string | number) => {
updateText = (event: React.FormEvent, text: string) => {
this.setState({ text });
this.props.onChange(event, text);
};

updateTextWhenExpanded = (event: React.FormEvent, text: string) => {
this.setState({ textWhenExpanded: text });
this.props.onChange(event, text);
};

render = () => {
const {
/* eslint-disable @typescript-eslint/no-unused-vars */
Expand Down Expand Up @@ -229,7 +235,14 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
{variant === 'expansion' && (
<ClipboardCopyToggle
isExpanded={this.state.expanded}
onClick={this.expandContent}
onClick={(_event) => {
this.expandContent(_event);
if (this.state.expanded) {
this.setState({ text: this.state.textWhenExpanded });
} else {
this.setState({ textWhenExpanded: this.state.text });
}
}}
id={`${toggleIdPrefix}${id}`}
textId={`${textIdPrefix}${id}`}
contentId={`${contentIdPrefix}${id}`}
Expand All @@ -239,7 +252,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
<TextInput
readOnlyVariant={isReadOnly || this.state.expanded ? 'default' : undefined}
onChange={this.updateText}
value={this.state.text as string | number}
value={this.state.expanded ? this.state.textWhenExpanded : this.state.text}
id={`text-input-${id}`}
aria-label={textAriaLabel}
{...(isCode && { dir: 'ltr' })}
Expand All @@ -253,7 +266,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
textId={`text-input-${id}`}
aria-label={hoverTip}
onClick={(event: any) => {
onCopy(event, this.state.text);
onCopy(event, this.state.expanded ? this.state.textWhenExpanded : this.state.text);
this.setState({ copied: true });
}}
onTooltipHidden={() => this.setState({ copied: false })}
Expand All @@ -266,7 +279,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
isReadOnly={isReadOnly}
isCode={isCode}
id={`content-${id}`}
onChange={this.updateText}
onChange={this.updateTextWhenExpanded}
>
{this.state.text}
</ClipboardCopyExpanded>
Expand Down