title: Navigating out of a TextField in a GridPane using the arrow keys in JavaFX
body: <p>I am making a sodoku solver program in Java with the JavaFX library. The program incorporates an interactive sodoku board consisting of a series of <code>TextField</code>s in a <code>GridPane</code>. The board looks like this:</p>
  <p><a href="https://i.stack.imgur.com/BGQDK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BGQDK.png" alt="The Sodoku Board" /></a></p>
  <p>Right now, the cursor is in the top left most <code>TextField</code>. If the field had text in it, the user would be able to move the cursor through the text by using the arrow keys. However, I want the user to be able to use the arrow keys to navigate to a different <code>TextField</code>. The issue is, the field is in &quot;typing mode&quot; (I don't know the official terminology) so the arrow keys only move the cursor to a different point in the text, but otherwise it stays in the same field.</p>
  <p>This is what I mean:</p>
  <p><a href="https://i.stack.imgur.com/THmWA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/THmWA.png" alt="enter image description here" /></a></p>
  <p>Pretend that line I drew is the cursor. Right now, if I click the left arrow key, the cursor will move to the left of the 1, but I want it to move the the <code>TextField</code> on the left, instead. If I click the down arrow key, nothing happens because there is no text below the 1 for the cursor to navigate to, but I want it to move to the <code>TextField</code> below, instead.</p>
  <p>The code for the <code>GridPane</code> is this:</p>
  <pre class="lang-java prettyprint-override"><code>TextField[][] squares = new TextField[9][9];
  GridPane grid = new GridPane();
  for (int i = 0; i &lt; 9; i++) {
      for (int j = 0; j &lt; 9; j++) {
          squares[i][j] = new TextField();
          squares[i][j].setPrefHeight(8);
          squares[i][j].setPrefWidth(25);
          grid.add(squares[i][j], j, i);
       }
  }
  grid.setAlignment(Pos.CENTER);
  </code></pre>
  <p>The <code>squares</code> array is for me to have access to individual <code>TextField</code>s in the <code>GridPane</code>.</p>
  <p>Any suggestions for how I can fix this?</p>