Request focus to shape is getting to the wrong control - javafx

Question

I am trying to request focus to a rectangle shape in my scene. When I do that using the mouse the focus property listener hasn't fired even the shape is traversable to focus. I tried to add an EventListener to the shape to call the requestFocus() method on it but after the rectangle gain the focus another button that doesn't have any listeners or additional code stole the focus immediately. After I removed that button the same thing is done by another control (all the controls that stole the focus are before the rectangle in the order of addition to the root node). I tried to traverse the focusing using the Tab button and it works. So, how can I request the focusing to the rectangle using the mouse?
<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="232.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<ToolBar prefHeight="40.0" prefWidth="200.0">
<items>
<Button mnemonicParsing="false" text="Button" />
</items>
</ToolBar>
<HBox prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
<children>
<VBox prefHeight="200.0" prefWidth="100.0">
<children>
<ListView id="slotsList" prefHeight="200.0" prefWidth="200.0" />
</children>
</VBox>
<FilmTimeLine HBox.hgrow="ALWAYS" fx:id="timeLine"/>
</children>
</HBox>
</children>
</VBox>
Rectangle class that I am adding it to the scene inside the FilmTimeLine (the FilmTimeLine is a ScrollPane that has a Pane child. The rectangle is inside that Pane):
public class EventSlot extends Rectangle {
public EventSlot() {
setFocusTraversable(true);
setWidth(100);
setHeight(25);
setFill(Color.web("#9DD3DF"));
focusedProperty().addListener((observable, oldValue, newValue) -> {
if (isFocused()) {
setEffect(FOCUSED_EFFECT);
} else {
setEffect(INNER_SHADOW);
}
});
addEventHandler(MouseEvent.MOUSE_PRESSED, (mouseEvent) -> {
requestFocus();
});
}
}
gif of what is happening

Answer 1

When an action occurs, the system constructs event route.
Looks like your mouse event is handled by Rectangle (I assume it is inherited from Node), Pane and FilmTimeLine.
So we need to construct event route to ignore/filter all nodes except of selected rectangle.
Options to modify the route:
Consuming of an Event. Invoke mouseEvent.consume() to stop event propagation.
addEventHandler(MouseEvent.MOUSE_CLECKED, (mouseEvent) -> {
requestFocus();
mouseEvent.consume();
});
Making parent node mouse transparent Node.setMouseTransparent(true). If true, this node (together with all its children) is completely transparent so make sure that all rectagles mouseTransparent property is false.
pane.setMouseTransparent(true);//the FilmTimeLine is a ScrollPane that has a Pane child
Adding event filter Node.addEventFilter
pane.addEventFilter(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() {
public void handle(MouseEvent event) { event.consume(); };
});