JDL react "update" page fails to submit unselected values for dropdowns of required relationships

[fil512]

Overview of the issue

Successfully jhipster import-jdl a simple model. One entity has two OneToMany required relationships. In dev, test data for required entities are inserted using liquibase. App launches with no errors using "gradle bootRun" and "yarn start" I navigate to the "create entity" page for my entity with the required relationships. The create entity page looks good. Dropdowns are properly populated with test data.

Issues:

1. If I submit without clicking on anything, I get error that values are "null" for the dropdowns I didn't touch.

2. If I select different values for the dropdowns and submit, the record is created with no errors.

3. If I select a different value and then select the default (first) value again, the record is created with no errors.

4. If there is only one choice, if I click on the dropdown and then submit, there are no errors. However if I submit without clicking, then there is an error.

A user shouldn't need to click on dropdowns if the field they want to select is already shown. Obviously, this is only an issue for required relationships.

Here is the error from the logs: 2018-06-26 16:10:10.368 WARN 43808 --- [ XNIO-2 task-15] o.z.p.spring.web.advice.AdviceTrait : Bad Request: Validation failed for argument at index 0 in method: public org.springframework.http.ResponseEntity com.wargameroom.wgrserver.web.rest.GamePlayResource.createGamePlay(com.wargameroom.wgrserver.domain.GamePlay) throws java.net.URISyntaxException, with 1 error(s): [Field error in object 'gamePlay' on field 'game': rejected value [null]; codes [NotNull.gamePlay.game,NotNull.game,NotNull.com.wargameroom.wgrserver.domain.Boardgame,NotNull]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [gamePlay.game,game]; arguments []; default message [game]]; default message [must not be null]]

Motivation for or Use Case

User interface is unusable as to users it appears that they have selected their choice, but it won't actually work unless they change the choice and then change it back again.

Reproduce the error

Populate records in Player and Boardgame table. Import the following JDL and then navigate to Create GamePlay and try to submit with only adding a name. You will get an error unless you click around the dropdowns first. See issue description for more details.

Related issues

Suggest a Fix

JHipster Version(s)

JHipster 5

JHipster configuration

Using JHipster version installed globally Executing jhipster:info Options: Welcome to the JHipster Information Sub-Generator

JHipster Version(s)

wgr-server@0.0.0 C:\Users\Ken\git\brucewig\wgr-server
`-- (empty)

JHipster configuration, a .yo-rc.json file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.wargameroom.wgrserver"
    },
    "jhipsterVersion": "5.0.0",
    "applicationType": "monolith",
    "baseName": "wgrServer",
    "packageName": "com.wargameroom.wgrserver",
    "packageFolder": "com/wargameroom/wgrserver",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": "spring-websocket",
    "databaseType": "sql",
    "devDatabaseType": "h2Memory",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "gradle",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "replaced-by-jhipster-info",
    "clientFramework": "react",
    "useSass": false,
    "clientPackageManager": "yarn",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": false
  }
}

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

entity Boardgame (boardgame) {
  name String required,
  minPlayers Integer,
  maxPlayers Integer
}
entity GamePlay (game_play) {
  name String required
}
entity BoardgameFaction (boardgame_faction) {
  name String required
}
entity Player (player) {
  realName String,
  phoneNumber String
}
entity Seat (seat) {
  lastMove LocalDate
}
relationship OneToOne {
  Player{user(login) required} to User
}
relationship OneToMany {
  Boardgame{play} to GamePlay{game(name) required},
  Player{iStarted} to GamePlay{createdBy required},
  Player{gameTurn} to GamePlay{turn},
  GamePlay{seat} to Seat{gameplay required},
  Player{playing} to Seat{playing required}
}
relationship ManyToOne {
  BoardgameFaction{game(name)} to Boardgame
}

service Boardgame, GamePlay, BoardgameFaction, Player, Seat with serviceImpl
paginate GamePlay, Seat with infinite-scroll

Environment and Tools

java version "1.8.0_171" Java(TM) SE Runtime Environment (build 1.8.0_171-b11) Java HotSpot(TM) 64-Bit Server VM (build 25.171-b11, mixed mode)

git version 2.16.2.windows.1

node: v8.10.0

npm: 5.6.0

yarn: 1.7.0

Docker version 18.03.0-ce, build 0520e24302

docker-compose version 1.20.1, build 5d8c71b2

Entity configuration(s) entityName.json files generated in the .jhipster directory

{ "name": "GamePlay", "fields": [ { "fieldName": "name", "fieldType": "String", "fieldValidateRules": [ "required" ] } ], "relationships": [ { "relationshipType": "one-to-many", "relationshipName": "seat", "otherEntityName": "seat", "otherEntityRelationshipName": "gameplay" }, { "relationshipType": "many-to-one", "relationshipValidateRules": "required", "relationshipName": "game", "otherEntityName": "boardgame", "otherEntityField": "name" }, { "relationshipType": "many-to-one", "relationshipValidateRules": "required", "relationshipName": "createdBy", "otherEntityName": "player", "otherEntityField": "id" }, { "relationshipType": "many-to-one", "relationshipName": "turn", "otherEntityName": "player", "otherEntityField": "id" } ], "changelogDate": "20180623233543", "entityTableName": "game_play", "dto": "no", "pagination": "infinite-scroll", "service": "serviceImpl", "jpaMetamodelFiltering": false, "fluentMethods": true, "clientRootFolder": "", "applications": "*" }

Browsers and Operating System

Windows 10 running on latest version of Chrome.

• [x] Checking this box is mandatory (this is just to show you read everything)

[fil512]

Here is the generated code that seems to be causing the problem. At load, we start with a gameId of 0:

export class GamePlayUpdate extends React.Component<IGamePlayUpdateProps, IGamePlayUpdateState> {
  constructor(props) {
    super(props);
    this.state = {
      gameId: 0,
      createdById: 0,
      turnId: 0,
      isNew: !this.props.match.params || !this.props.match.params.id
    };
  }

Then gameid is only updated when the dropdown is changed:

<AvGroup>
                  <Label for="game.name">Game</Label>
                  <AvInput id="game-play-game" type="select" className="form-control" name="game.name" onChange={this.gameUpdate}>
                    {boardgames
                      ? boardgames.map(otherEntity => (
                          <option value={otherEntity.name} key={otherEntity.id}>
                            {otherEntity.name}
                          </option>
                        ))
                      : null}
                  </AvInput>
                  <AvInput id="game-play-game" type="hidden" name="game.id" value={this.state.gameId} />
                </AvGroup>

I guess what needs to happen is gameId needs to be set to the value of the top in the select.

[mkysoft]

Same of us.

[agaspardcilia]

I was able to reproduce the error. I'll try to fix it today.

[agaspardcilia]

The issue is caused by AvForm. When you create an select if you don't interact with it, no matter what is the first option, it will return "" if there's no explicit value.

[fil512]

This fix resolves my issue. THANK YOU for solving it so quickly!!!

[abiieez]

Is this fixed in the latest release ? or I need to manually fix it ?

[pascalgrimaud]

@abiieez : this ticket has been closed 1 year ago and concerned the version 5.0.2, so to answer you, yes, it should be in the last release 6.1.2.