Fix selection and focus not updating when clicking around in a notebook (microsoft#7806)

* Fix selection and focus not updating when clicking around in a notebook editor. * Also fix add cell to put focus in the new cell

Author: rchiodo

news/2 Fixes/7802.md

@@ -0,0 +1 @@
+Fix selection and focus not updating when clicking around in a notebook editor.

package-lock.json

@@ -26,7 +26,6 @@ interface ICellInputProps {
  monacoTheme: string | undefined;
  editorOptions?: monacoEditor.editor.IEditorOptions;
  editorMeasureClassName?: string;
- focusedCell?: string;
  showLineNumbers?: boolean;
  font: IFont;
  onCodeChange(changes: monacoEditor.editor.IModelContentChange[], cellId: string, modelId: string): void;
@@ -56,7 +55,7 @@ export class CellInput extends React.Component<ICellInputProps> {
  }
 
  public componentDidUpdate(prevProps: ICellInputProps) {
- if (this.props.focusedCell === this.props.cellVM.cell.id && prevProps.focusedCell !== this.props.focusedCell) {
+ if (this.props.cellVM.focused && !prevProps.cellVM.focused) {
  this.giveFocus();
  }
  }

src/datascience-ui/interactive-common/cellInput.tsx

@@ -314,8 +314,8 @@ export class MainStateController implements IMessageHandler {
  // Update our state
  this.setState({
  cellVMs: newVMs,
- selectedCell: newSelection,
- focusedCell: newFocused,
+ selectedCellId: newSelection,
+ focusedCellId: newFocused,
  undoStack: this.pushStack(this.pendingState.undoStack, this.pendingState.cellVMs),
  skipNextScroll: true
  });
@@ -509,7 +509,7 @@ export class MainStateController implements IMessageHandler {
  newVMs[oldSelect] = { ...newVMs[oldSelect], focused: false };
  }
  // Only unfocus if we haven't switched somewhere else yet
- this.setState({ focusedCell: undefined, cellVMs: newVMs });
+ this.setState({ focusedCellId: undefined, cellVMs: newVMs });
  }
  }
 
@@ -528,13 +528,13 @@ export class MainStateController implements IMessageHandler {
  }
 
  // Save the whole thing in our state.
- this.setState({ selectedCell: cellId, focusedCell: cellId, cellVMs: newVMs });
+ this.setState({ selectedCellId: cellId, focusedCellId: cellId, cellVMs: newVMs });
  }
  }
 
- public selectCell = (cellId: string, focusedCell?: string) => {
+ public selectCell = (cellId: string, focusedCellId?: string) => {
  // Skip if already the same cell
- if (this.pendingState.selectedCellId !== cellId || this.pendingState.focusedCellId !== focusedCell) {
+ if (this.pendingState.selectedCellId !== cellId || this.pendingState.focusedCellId !== focusedCellId) {
  const newVMs = [...this.pendingState.cellVMs];
  // Switch the old vm
  const oldSelect = this.findCellIndex(this.pendingState.selectedCellId);
@@ -543,11 +543,11 @@ export class MainStateController implements IMessageHandler {
  }
  const newSelect = this.findCellIndex(cellId);
  if (newSelect >= 0) {
- newVMs[newSelect] = { ...newVMs[newSelect], selected: true, focused: focusedCell === newVMs[newSelect].cell.id };
+ newVMs[newSelect] = { ...newVMs[newSelect], selected: true, focused: focusedCellId === newVMs[newSelect].cell.id };
  }
 
  // Save the whole thing in our state.
- this.setState({ selectedCell: cellId, focusedCell, cellVMs: newVMs });
+ this.setState({ selectedCellId: cellId, focusedCellId, cellVMs: newVMs });
  }
  }
 

src/datascience-ui/interactive-common/mainStateController.ts

@@ -186,8 +186,8 @@ export class NativeCell extends React.Component<INativeCellProps> {
  // Not a click on an button in a toolbar, select the cell.
  ev.stopPropagation();
  this.lastKeyPressed = undefined;
- const focusedCell = this.isFocused() ? this.cellId : undefined;
- this.props.stateController.selectCell(this.cellId, focusedCell);
+ const focusedCellId = this.isFocused() ? this.cellId : undefined;
+ this.props.stateController.selectCell(this.cellId, focusedCellId);
  }
  }
  }
@@ -487,7 +487,7 @@ export class NativeCell extends React.Component<INativeCellProps> {
  const newCell = this.props.stateController.insertBelow(this.props.cellVM.cell.id, true);
  this.props.stateController.sendCommand(NativeCommandType.AddToEnd, 'mouse');
  if (newCell) {
- this.props.selectCell(newCell);
+ this.props.focusCell(newCell, true);
  }
  }
 

src/datascience-ui/native-editor/nativeCell.tsx

@@ -172,8 +172,11 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
  // tslint:disable: react-this-binding-issue
  private renderToolbarPanel() {
  const addCell = () => {
- this.stateController.addNewCell();
+ const newCell = this.stateController.addNewCell();
  this.stateController.sendCommand(NativeCommandType.AddToEnd, 'mouse');
+ if (newCell) {
+ this.stateController.selectCell(newCell.cell.id, newCell.cell.id);
+ }
  };
  const runAll = () => {
  this.stateController.runAll();